JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<button id="clear">Clear</button>
<canvas id="canvas"></canvas>

CSS

canvas{
    border:1px solid;
}
button{
    display: block;
}

JavaScript

var canvas = document.getElementById('canvas');

function draw(x, y) {
  var ctx = canvas.getContext('2d');
  ctx.font = "10px serif";
  ctx.strokeText("text", x, y);
}

canvas.onmousemove = function (e){
 draw(e.offsetX, e.offsetY);  
}

function clear(){
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}
document.getElementById('clear').onclick = clear;