JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<h4>Click in canvas to set zoom coordinate<br>Use mousewheel to zoom</h4>
<canvas id="canvas" width=300 height=300></canvas>

CSS

body{ background-color: ivory; }
canvas{border:1px solid red;}

JavaScript

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

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var counter=1;
var scale=1.00;
var interval=0.01;
var cx=-400;
var cy=-200;
var once=false;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/googlemap.png";
function start(){
    
    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    canvas.addEventListener('DOMMouseScroll',handleScroll,false);
    canvas.addEventListener('mousewheel',handleScroll,false);
    
    animate();

}

function animate(){
    requestAnimationFrame(animate);
    
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(cx,cy);
    ctx.scale(scale,scale);
    ctx.drawImage(img,-cx,-cy);
    ctx.restore();
}

function handleMouseDown(e){
    if(once){return;}
    once=true;
    
    e.preventDefault();
    e.stopPropagation();
    
    cx=parseInt(e.clientX-offsetX);
    cy=parseInt(e.clientY-offsetY);
}

var handleScroll = function(e){
    e.preventDefault();
    e.stopPropagation();

    var delta=e.wheelDelta?e.wheelDelta/30:e.detail?-e.detail:0;
    if (delta){
        counter+=delta;
        scale=1+counter/100;
    }
};