JSFiddle - React, Tailwind, and code Playground

by julienbidoret

HTML

<canvas id="canvas1" width="500" height="500"></canvas>

JavaScript

var diametre = 60;
var canvaswidth = 500;
var canvasheight = 500;
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

can.addEventListener('mousemove', function(e) {
    var mouse = getMouse(e, can);
    redraw(mouse);
}, false);


function redraw(mouse) {
    console.log('a');
    can.width = can.width;
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.rect(0,0,canvaswidth,canvasheight);
    var radgrad = ctx.createRadialGradient(mouse.x, mouse.y,0,mouse.x, mouse.y,diametre);
        radgrad.addColorStop(0, 'rgba(0,0,0,0)');
        radgrad.addColorStop(0.8, 'rgba(0,0,0,0)');
        radgrad.addColorStop(1, 'rgba(0,0,0,1)');
    ctx.fillStyle = radgrad;
    ctx.clip();
    ctx.fillRect(0,0,canvaswidth,canvasheight);
}

var img = new Image();
img.onload = function() {
    redraw({x: -500, y: -500})
}
        img.src = 'http://placekitten.com/500/500';

// Creates an object with x and y defined,
// set to the mouse position relative to the state's canvas
// If you wanna be super-correct this can be tricky,
// we have to worry about padding and borders
// takes an event and a reference to the canvas


function getMouse(e, canvas) {
    var element = canvas,
        offsetX = 0,
        offsetY = 0,
        mx, my;

    // Compute the total offset. It's possible to cache this if you want
    if (element.offsetParent !== undefined) {
        do {
            offsetX += element.offsetLeft;
            offsetY += element.offsetTop;
        } while ((element = element.offsetParent));
    }

    mx = e.pageX - offsetX;
    my = e.pageY - offsetY;

    // We return a simple javascript object with x and y defined
    return {
        x: mx,
        y: my
    };
}