Back to Questions
1.3k
views4
comments
How to retrieve the accurate Mouse Position in a Canvas?
websharpercanvasmousepositionmouseevent

Hi. I've created an HTML Canvas with a drawing in it. I would like to do some animation based on the mouse's position. I've attached an OnMouseMove event, with this function signature:

1
2

let doMouseMove (sender:Element) (event:MouseEvent) = 
   .. (code) ..

I see that I can retrieve the X/Y position from parameter "event", via event.Y, or event.Event.ClientY.

However this position is inaccurate. This is a known issue: http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

Appearantly, Canvas has some margins (or something) and you need to call canvas.getBoundingClientRect() to get the margin. But I can't find this function (W# 3.0.46.130-rc1).

These are my values:

1
2
3

let dom = Tags.Canvas []
let canvas = As<CanvasElement> dom.Dom
let context = canvas.GetContext "2d"

I cannot find the bounding client rect. And the margin is quite large (ie 47 pixels) so I require correction.

.

The correspinding CSSOM feautres have been added to WebSharper and will be available in the next release.

By on 4/13/2015 7:13 AM ()

... which is now public. Can you retry and report back issues, if any?

By on 4/16/2015 4:20 PM ()

Thanks; unfortunately I switched to resolving my task with HTML controls and CSS instead of Canvas. So unfortunately I won't test this in the short term. I do like the technique though, I can use it for other questions which I have. It is great that W# is so extendible!

By on 4/18/2015 11:57 AM ()

This indeed seems to be missing from our bindings. For the time being you can define an extension method or just simple method which takes a CanvasElement:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

type DOMRect = 
    { 
        [<Name "x">]      X : int
        [<Name "y">]      Y : int
        [<Name "width">]  Width : int
        [<Name "height">] Height : int
        [<Name "top">]    Top : int
        [<Name "right">]  Right : int
        [<Name "bottom">] Bottom : int 
        [<Name "left">]   Left : int
    }

type CanvasElement with
    [<Inline "$0.getBoundingClientRect()">]
    member this.GetBoundingClientRect () = X<DOMRect>

or if you don't fancy the Name attributes you can use lowercase names for the fields in DOMRect.

By on 4/7/2015 2:18 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper