Zoom in on a point (using scale and translate)
- by csiz
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>
