Canvas Zooming

by andyjmeyers

HTML

<canvas id='myCanvas' width='600' height='250' style='border:1px solid black;'></canvas>
<div id='currentPosition'></div>
<div>
    <button id='reset'>Reset Scale</button>
</div>
<div id='log'></div>

JavaScript

var isDragging = false;
var isClick = false;

var startPosition = {};
var currentTranslation = {
    x: 0,
    y: 0
};
var canvasScale = {
    width: 1,
    height: 1
};

var canvas = document.getElementById('myCanvas');
var reset = document.getElementById('reset');
drawPicture();
canvas.addEventListener('click', clickHandler);
reset.addEventListener('click', resetScale);
canvas.addEventListener('mousemove', moveHandler);
canvas.addEventListener("mousedown", mousedownHandler);
canvas.addEventListener("mouseup", mouseupHandler);
canvas.addEventListener("mouseleave", mouseupHandler);

function drawPicture() {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.save();
    context.scale(canvasScale.width, canvasScale.height);
    context.translate(-currentTranslation.x, -currentTranslation.y);
    var x = 200;
    var y = 100;

    context.beginPath();
    context.moveTo(x, y);
    context.bezierCurveTo(x - 40, y + 20, x - 40, y + 70, x + 60, y + 70);
    context.bezierCurveTo(x + 80, y + 100, x + 150, y + 100, x + 170, y + 70);
    context.bezierCurveTo(x + 250, y + 70, x + 250, y + 40, x + 220, y + 20);
    context.bezierCurveTo(x + 260, y - 40, x + 200, y - 50, x + 170, y - 30);
    context.bezierCurveTo(x + 150, y - 75, x + 80, y - 60, x + 80, y - 30);
    context.bezierCurveTo(x + 30, y - 75, x - 20, y - 60, x, y);
    context.closePath();

    var grd = context.createRadialGradient(260, 80, 10, 260, 80, 200);
    grd.addColorStop(0, "#8ED6FF");
    grd.addColorStop(1, "#004CB3");
    context.fillStyle = grd;
    context.fill();

    context.lineWidth = 5;
    context.strokeStyle = 'blue';
    context.stroke();
    context.restore();

}

function clickHandler(evt) {
    var log = document.getElementById('log');
    var actualXY = getCursorPosition(evt);
    log.innerHTML += "x: " + actualXY.x +
        ", y: " + actualXY.y + "<br />";

}

function...