Menu
How can I simulate a mouse down and then followed by a mouse up event on a canvas hmtl5 section of an aspx page?
I searched on the web and found this... but i cannot correlate this to my canvas html5 element, Can anyone help ?
dispatchMouseEvent(element, 'mouseover', true, true);
dispatchMouseEvent(element, 'mousedown', true, true);
dispatchMouseEvent(element, 'click', true, true);
dispatchMouseEvent(element, 'mouseup', true, true);
884
We can take Javascript help to simulate good animation over a HTML5 canvas. Following are the two important Javascript methods which would be used to animate an image on a canvas − This method repeatedly executes the supplied code after a given time milliseconds. This method executes the supplied code only once after a given time milliseconds.
Mouse Events and the HTML5 Canvas You can also detect a mouse click on your canvas. Again, this is done with addEventListener. There are quite a few mouse events you can detect: mousedown, mouseup, mousemove, mouseout and mouseover.
You can also detect a mouse click on your canvas. Again, this is done with addEventListener. There are quite a few mouse events you can detect: mousedown, mouseup, mousemove, mouseout and mouseover. As an example, here's some code that detects the mousedown event: The BODY tag calls an onLoad function. Inside of this function we have this:
HTML5 Canvas - Animations. HTML5 canvas provides necessary methods to draw an image and erase it completely. We can take Javascript help to simulate good animation over a HTML5 canvas.
"Simulating" events is very easy, in fact, you can simply trigger them. Using jQuery, this becomes child's play (see this jsfiddle for working example):
$('#canvas_element').on("mousedown mouseup", function(e) {
console.log(e.type + " event fired at coords: " + e.pageX + ", " + e.pageY);
});
x_coord = 1;
y_coord = 1;
var e = jQuery.Event( "mousedown", { pageX: x_coord, pageY: y_coord } );
$('#canvas_element').trigger(e);
// execute more code
x_coord = 255;
y_coord = 255;
var e = jQuery.Event( "mouseup", { pageX: x_coord, pageY: y_coord } );
$('#canvas_element').trigger(e);
See this old SO question for a pure javascript solution.
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
