JSFiddle - React, Tailwind, and code Playground

by rionmonster

HTML

<canvas id="canvas" height='637' width='932' ></canvas>

CSS

canvas { border: 2px solid black; height: 637px; width: 932px; }

JavaScript

var canvas = document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var mouse={x:0,y:0} //make an object to hold mouse position
var scale = 2;

canvas.onmousemove=function(e){mouse={x:e.pageX-this.offsetLeft,y:e.pageY-this.offsetTop};} 
canvas.onmousemove=function(e){mouse={x:e.pageX-this.offsetLeft,y:e.pageY-this.offsetTop};} 

var img=new Image()

img.src="http://magickcanoe.com/moths/io-moth-1-large.jpg";

setInterval( render ,100)// set the animation into motion



function render(){
ctx.save()
ctx.beginPath()
ctx.fillRect(0,0,canvas.width,canvas.height) //fill the background. color is default black
ctx.arc(mouse.x,mouse.y,250,0,6.28,false)//draw the circle
ctx.clip()//call the clip method so the next render is clipped in last path
ctx.drawImage(img,0,0,img.width*scale,img.height*scale) 

ctx.closePath()
ctx.restore()

}