JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

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

CSS

canvas {
    border: 1px solid #ccc
}

JavaScript

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

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

var el = document.getElementById('c');
var ctx = el.getContext('2d');

ctx.lineJoin = ctx.lineCap = 'round';
ctx.fillStyle = 'red';

var isDrawing, points = [],
    radius = 15;

el.onmousedown = function (e) {
    if (!isDrawing) return;

    points.push({
        x: e.clientX,
        y: e.clientY,
        radius: getRandomInt(5, 20),
        opacity: Math.random()
    });
};
el.onmousemove = function (e) {
    isDrawing = true;
    points.push({
        x: e.clientX,
        y: e.clientY,
        radius: getRandomInt(10, 30),
        opacity: Math.random()
    });

    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    for (var i = 0; i < points.length; i++) {

        ctx.beginPath();
        ctx.globalAlpha = points[i].opacity;
        ctx.setLineDash([5]);
        ctx.arc(
        points[i].x, points[i].y, points[i].radius,
        false, Math.PI * 2, false);
        ctx.fill();
        ctx.fillStyle = 'red';
        ctx.stroke();
        ctx.drawImage(img, 0, 0);
    }
};
el.onmouseup = function () {
    //isDrawing = false;
    //points.length = 0;
};