JSFiddle - React, Tailwind, and code Playground

by Stefano Bertoli

HTML

<canvas></canvas>

CSS

body{margin:0;}

JavaScript

var canvas=document.querySelector('canvas');
var context=canvas.getContext('2d');
context.fillStyle='red';
context.fillRect(0,0,40,100);
context.fillStyle='white';
context.fillRect(40,0,40,100);
context.fillStyle='green';
context.fillRect(80,0,40,100);
context.fillStyle='black';
context.fillRect(0,0,canvas.width, canvas.height);
context.fillStyle='yellow';
var l=50;
var x0=canvas.width/2-l/2;var y0=canvas.width/4-l/2;
context.fillRect(x0,y0,l,l);
//context.fillRect(canvas.width/4,canvas.width/8,canvas.width/2, canvas.height/2);
//modalità stateful, c'è uno stato di default, quindi prima ad esempio bisogna impostare il valore di riempimento
canvas.addEventListener('mousemove',function(e){
    //canvas.width=canvas.width;
    console.log(e);
    context.clearRect(0,0,canvas.width, canvas.height);
        context.fillRect(e.pageX,e.pageY,l,l);
},false);