JSFiddle - React, Tailwind, and code Playground

by k6e2n0t12

HTML

<canvas id="main" width="1000" height="1000"></canvas>

CSS

#main {
    width:300px;
    height:300px;
    background-color: black;
}

JavaScript

var cn = document.getElementById("main");
var c = cn.getContext("2d");

var mouse = {x:0, y:0};

window.addEventListener('mousedown', mHandler);

function mHandler(event) {
    //mouse.x = event.clientX;
    //mouse.y = event.clientY;
    mouse.x = event.pageX;
    mouse.y = event.pageY;
};

function main() {

    
    c.clearRect(0, 0, cn.width, cn.height);
    //c.fillStyle = "red";
    //c.fillRect(mouse.x, mouse.y, 50, 50);
    var img = new Image;
		img.src = "https://www.ponycanyon.co.jp/images/wcms/accessor/bin/jacket/PCBE000076117.jpg?size=3&order=1";
    //var img = document.getElementById("image");
    c.drawImage(img, mouse.x, mouse.y);
}

setInterval(main, 1000 / 60);