JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="400" height="400"></canvas>

JavaScript

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

function windowToCanvas(canvas, x, y) {

    var bbox = c.getBoundingClientRect();
    return {
        x: x - bbox.left * (canvas.width / bbox.width),
        y: y - bbox.top * (canvas.height / bbox.height)
    }
}


function randRange(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function drawPumpkin(e) {

    var loc = windowToCanvas(c, e.clientX, e.clientY);


    console.log("Mouse location: " + loc.y);
    ctx.beginPath();

    ctx.drawImage(img, loc.x, loc.y);

}

var img = new Image();
img.src = "http://orig09.deviantart.net/314c/f/2011/218/7/2/nyan_cat_sprite_by_pincers1066-d45od59.jpg";

c.addEventListener("mousemove", drawPumpkin);
ctx.fillStyle = "";
ctx.fillRect(0,0,c.width,c.height);