JSFiddle - React, Tailwind, and code Playground

by microbians

HTML

<canvas id="canvas" width="162" height="162"></canvas>

CSS

body{
    margin: 0;
}

canvas{
    cursor: pointer;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function star(ctx, color){
    ctx.beginPath();
    ctx.moveTo(90.6, 71.1);
    ctx.lineTo(76.0, 94.6);
    ctx.lineTo(87.1, 120.0);
    ctx.lineTo(60.2, 113.4);
    ctx.lineTo(39.5, 131.7);
    ctx.lineTo(37.5, 104.1);
    ctx.lineTo(13.6, 90.1);
    ctx.lineTo(39.3, 79.7);
    ctx.lineTo(45.3, 52.6);
    ctx.lineTo(63.1, 73.8);
    ctx.lineTo(90.6, 71.1);
    ctx.closePath(); 
}

function circle(ctx,color){
    ctx.beginPath();
    ctx.moveTo(160.2, 80.9);
    ctx.bezierCurveTo(160.2, 37.0, 124.7, 1.5, 80.9, 1.5);
    ctx.bezierCurveTo(37.0, 1.5, 1.5, 37.0, 1.5, 80.9);
    ctx.bezierCurveTo(1.5, 124.7, 37.0, 160.2, 80.9, 160.2);
    ctx.bezierCurveTo(124.7, 160.2, 160.2, 124.7, 160.2, 80.9);
    ctx.closePath();
}

function polygon(ctx) {
    ctx.beginPath();
    ctx.moveTo(141.3, 58.6);
    ctx.lineTo(132.6, 96.0);
    ctx.lineTo(95.9, 107.2);
    ctx.lineTo(67.8, 81.0);
    ctx.lineTo(76.4, 43.6);
    ctx.lineTo(113.2, 32.3);
    ctx.lineTo(141.3, 58.6);
}

function render(who,color){
    ctx.save();
    ctx.fillStyle = color;
    who(ctx);
    ctx.closePath();
    ctx.fill();
    ctx.lineWidth = 3.0;
    ctx.stroke();
    ctx.restore();
}

function hitCheck(who,x,y){
console.log(who)
    ctx.save();
    who(ctx);
    ctx.closePath();
    ctx.restore();
    return ctx.isPointInPath(x,y);
}

function cliptoshape(who,ctx){
     who(ctx);
     ctx.clip();
}

function drawSquares(ctx,x,y,red){
    ctx.fillStyle='rgb('+red+','+(Math.random()*255|0)+','+(Math.random()*255|0)+');';
    ctx.fillRect(x-5,y-5,Math.random()*20,Math.random()*20)
}

render(circle,'blue');
render(polygon,'red');
render(star,'yellow');

document.body.onmousemove2 = function(e){
    var x = e.clientX;
    var y = e.clientY;
    if(hitCheck(polygon,x,y)){
        render(polygon,'purple');
    }else{
         render(polygon,'red');   
    }
    if(hitCheck(star,x,y)){
        render(star,'orange');
    }else{
 ...