Question

I would like to know if there is any special way that one would use to register events for html5 canvas elements?

The following code won’t raise any mouse events on my canvas elements:

function MyObject() {
   this.init();
};

MyObject.prototype.init = function() {
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');
   var anImage = new Image('image1.png');

   ctx.drawImage(anImage, 0, 0, 100, 100, 0, 0, 100, 100);

   canvas.onmousedown = createDelegate(this, this.mouseDownEvent);
}

MyObject.prototype.mouseDownEvent = function(e) {
    //Not even reaching this point.
}

var obj = new MyObject();

the mouseDownEvent function is not even getting called when I click on the canvas. Can anybody tell me whats wrong with the code.

N.B. Swapping out the canvas for image tags fixes the problem.

Answer 1

Ok, I know this is strange but by adding a

-webkit-transform: translate3d(0, 0, 0)

styling to the canvas element seems to have fixed the issue…weird.