JSFiddle - React, Tailwind, and code Playground

by Justin Chen

HTML

<canvas id="test" width="100" height="100"></canvas>

JavaScript

var startScale = 1;
var scale = startScale;
var ctx = $("#test")[0].getContext("2d")
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var intervalId;

ctx.arc(50, 50, 25, 0, Math.PI*2, false);
ctx.fill();

var imageData = ctx.getImageData(0, 0, width, height);
var copiedCanvas = $("<canvas>").attr("width", width).attr("height", height)[0];
copiedCanvas.getContext("2d").putImageData(imageData, 0, 0);

$("#test").mousedown(function(){
    intervalId = setInterval(function(){
        scale = scale + 0.01;
        drawContents();
    }, 50);
});

$("#test").mouseup(function(){
    clearInterval(intervalId);
    intervalId = setInterval(function(){
        if (scale <= startScale){
            clearInterval(intervalId);
        }        
        scale = scale - 0.01;
        drawContents();
    }, 50);
});

function drawContents(){
    var newWidth = width * scale;
    var newHeight = height * scale;
    
    ctx.save();
    ctx.translate(-((newWidth-width)/2), -((newHeight-height)/2));
    ctx.scale(scale, scale);
    ctx.clearRect(0, 0, width, height);
    ctx.drawImage(copiedCanvas, 0, 0);
    ctx.restore();
}