JSFiddle - React, Tailwind, and code Playground

by Jawad Khan

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<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 canvas = $("<canvas>").attr("width", width).attr("height", height)[0];
canvas.getContext("2d").putImageData(imageData, 0, 0);

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(canvas, 0, 0);
    ctx.restore();
}
    
 $("#test").on('DOMMouseScroll mousewheel',function(e) {
 
        var e =  e || window.event; // old IE support
        var theEvent = e.originalEvent.wheelDelta || e.originalEvent.detail*-1;
        if(theEvent / 120 > 0) {
            zoomin();
        } else {
            zoomout();
        }
        if (e.preventDefault)
            e.preventDefault();
    });
    
    function zoomin()
    {
         scale = scale + 0.01;
         drawContents();
    }
    function zoomout()
    {
         scale = scale - 0.01;
         drawContents();
    }