JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

JavaScript

var can = document.createElement("canvas");
can.width = innerWidth - 20;
can.height = 200;
var cxt = can.getContext("2d");
can.setAttribute("tabindex","2");
document.body.appendChild(can);
var img = new Image();
img.src = "https://www.google.com/images/srpr/logo4w.png";
img.onload = function(){
	cxt.drawImage(img,0,0);
}
$(document).ready(function(){
    $(can).on("mousewheel",function(e){
        x = 0.1;
        if(e.originalEvent.wheelDelta > 0){
           x = 1 - x;
        } else {
           x = 1 + x;
        }
        cxt.scale(x,x);
//        console.log(e.clientX +' >> '+ x);
//        console.dir(e.originalEvent);
        cxt.clearRect(0,0,1000,1000);
//        console.log((innerWidth/2) - (e.pageX*2));
        cxt.drawImage(img,(innerWidth/2) - (e.pageX*2),(innerHeight/2) - (e.pageY*2));
    });
});