• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 268
  • Last Modified:

Canvas - How to adjust mouse position based on Scale value

How can I adjust the mouse position based on the scale (zoom) value of a canvas.

See the following.  See how mouse position is OFF.

http://jsfiddle.net/JElster/bueawkc2/


thx


<div id="images"></div>
<canvas  style="margin:0;padding:0;position:relative;left:150px;top:50px;" id="imgCanvas" width="500" height="500"></canvas>

var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");

context.scale(2,2);   // Zoom 200 %

function draw(e) {
    var pos = getMousePos(canvas, e);
    posx = pos.x;
    posy = pos.y;
    context.fillStyle = "#0000ff";
    context.fillRect(posx, posy, 4, 4);
}
window.addEventListener('mousemove', draw, false);

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
}
0
JElster
Asked:
JElster
1 Solution
 
viseeraCommented:
context.fillRect((posx/2), (posy/2), 4, 4);

//This is for 200% scale as it is coded.


this would be helpful. perhaps.

Seetharaman.N
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now