title: Best way to transform mouse coordinates to HTML5 Canvas's transformed context
body: <p>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.</p>
  
  <p>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.</p>
  
  <pre><code>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&lt;this.objects.length;i++)
      {
          this.objects[i].update();
          this.objects[i].draw(this.context);         
      }
      this.context.restore();
  }
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>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();
  
  }
  </code></pre>
  
  <p>Finally I have the Shape's draw method which successfully is called and transforms the context yet again.</p>
  
  <pre><code>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();
  }
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>Shape.prototype.mouseEventListener = function(evt,type)
  {
      console.log(evt.clientX+" "+evt.clientY);
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I would also like to do all this easily without any other libraries.</p>
  
  <p>Thank you.</p>