JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

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

JavaScript

var FPS = 1000 / 30;
var canvas = $("#canvas");
var ctx = canvas[0].getContext("2d");

var maskedImage = new Image();
maskedImage .src = "http://www.fanboy.com/archive-images/hello-kitty-cat-clothing-01.jpg";

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

canvas.bind("mousemove", function(event) {
    prev.x = mouse.x;
    prev.y = mouse.y;
    mouse.x = event.clientX;
    mouse.y = event.clientY;
    draw();
});

function draw() {
    //console.log("draw", canvas.width, canvas.height);
    ctx.clearRect(canvas.width, canvas.height);
    ctx.lineWidth = 4;
    ctx.strokeStyle = "#FF0000";
    
    ctx.beginPath();
    ctx.moveTo(prev.x,prev.y);
    ctx.lineTo(mouse.x, mouse.y);
    ctx.arc(mouse.x,mouse.y,45,0,6.28,false)//draw the circle
    ctx.clip()//call the clip method so the next render is clipped in last path
    ctx.drawImage(maskedImage,0,0) 
    ctx.stroke();
}