javascript - Best way to transform mouse coordinates to HTML5 Canvas's transformed context

Question

I am testing to see if the mouse is located on an object. The problem is the object has been transformed. I have graph of objects, mainly the camera, then the slider object, and finally the shape object. I need to be able to see if the mouse coordinates are inside a specified rectangle relative to the shape object.

Here I have my game loop which transforms the clears the canvas then transforms the camera. I then go into a for loop and loop through all the objects calling their specific "draw" method, passing in the context that has been transformed.

Game.prototype.gameLoop = function()
{
    this.context.clearRect(0,0,this.canvas.width, this.canvas.height);
    this.context.save();



    this.context.translate(this.canvas.width/2, this.canvas.height/2);
    this.context.scale(this.camera.scale,this.camera.scale);
    this.context.rotate(this.camera.rotate);
    this.context.translate(this.camera.x,this.camera.y);


    for(var i=0;i<this.objects.length;i++)
    {
        this.objects[i].update();
        this.objects[i].draw(this.context);         
    }
    this.context.restore();
}

Here is one of the objects draw method. The object is called a Slider. It successfully is called and performs a transformation based on it's x,y, and rotate values.

Slider.prototype.draw = function(ctx)
{
    ctx.save();

    ctx.translate(this.x,this.y);
    ctx.rotate(this.rotate);

    this.pointer.draw(ctx);

    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.moveTo(-(this.width/2),0);
    ctx.lineTo((this.width/2),0);
    ctx.lineTo((this.width/2),5);
    ctx.lineTo(-(this.width/2),5);
    ctx.fill();


    ctx.restore();

}

Finally I have the Shape's draw method which successfully is called and transforms the context yet again.

Shape.prototype.draw = function(ctx)
{
    ctx.save();

    ctx.translate(this.x,this.y);
    ctx.rotate(this.rotate);

    if(this.isMouseOver)
        ctx.fillStyle = this.color;
    else
        ctx.fillStyle = this.mouseOverFillColor;
    ctx.fill(this.shape);   

    ctx.restore();
}

And lastly, here is the method that gets called when the mouse moves called "mouseEventListener". I need to be able to transform the coordinates to see them relative to the shape.

Shape.prototype.mouseEventListener = function(evt,type)
{
    console.log(evt.clientX+" "+evt.clientY);
}

Any ideas? If needed I can create a parent pointer object and have the shape point to the slider and the slider point to the camera to access each parent's x,y, rotate vales.

I am kind of looking for the equivalent of Android's mappoints method, which transforms points based off a matrix. In this case the context has been transformed multiple times and I need a way to capture that state for each object, and then transform some points.

I would also like to do all this easily without any other libraries.

Thank you.

Answer 1

Waitting for answers