JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<canvas id="Canvas" width="720" height="480"></canvas>
<br>
<b>Mouse1:</b> Cleares canvas

CSS

body{
    background:#262626;
    color:white;
    font-family:helvetica, sans-serif;
}

#Canvas{
    background:rgb(10, 10, 10);
    border:solid 2px black;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}

JavaScript

var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
var y = canvas.height;
var x = canvas.width;
var squareValue = 4;

var playSound = 0;

 var context = new window.AudioContext(),
     osc = context.createOscillator();
     osc.connect(context.destination);

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
}

function clear(){
    ctx.clearRect(0,0,x,y);
    if(playSound == 1){
        playSound = 0;
        osc.stop();
    }else if(playSound == 0){
        playSound = 1;
        osc.start(0);
    }
}

function draw(e){
    
    var pos = getMousePos(canvas, e);
    posx = pos.x;
    posy = pos.y;
    
    var pastX = posx;
    var pastY = posy;
    
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(posx,posy,squareValue,squareValue);

    osc.frequency.value = posx / posy * 1000 + 300;
    
    setTimeout(function(){
        ctx.fillStyle = "rgb(10, 10, 10)"
        ctx.fillRect(pastX,pastY,squareValue,squareValue);
    },1000);
    
}
window.addEventListener('mousemove', draw, false);
window.addEventListener('click', clear, false);