Zoom in on a point (using scale and translate)

Posted by csiz on Stack Overflow See other posts from Stack Overflow or by csiz
Published on 2010-05-26T19:24:45Z Indexed on 2010/05/27 8:11 UTC
Read the original article Hit count: 106

Filed under:
|
|

I want to be able to zoom in on the point under the mouse in canvas with the mouse whell, like when zooming on maps.google.

I'd like straight code as I've been working on this for 5h+

Something to start with:

<canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var scale = 1;
var originx = 0;
var originy = 0;

function draw(){
    context.fillStyle = "white";
    context.fillRect(originx,originy,800/scale,600/scale);
    context.fillStyle = "black";
    context.fillRect(50,50,100,100);
}
setInterval(draw,100);

canvas.onmousewheel = function (event){
    var mousex = event.clientX - canvas.offsetLeft;
    var mousey = event.clientY - canvas.offsetTop;
    var wheel = event.wheelDelta/120;//n or -n

    var zoom = 1 + wheel/2;

    scale *= zoom;
    originx += 0;//???
    originy += 0;//???

    context.scale(zoom,zoom);
    context.translate(0,0);//???
}
</script>

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html5