JSFiddle - React, Tailwind, and code Playground

by Aijoona

HTML

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

CSS

canvas {
    background: #ccc;
}

JavaScript

// Nuestras variables
var canvas, ctx;

// Obtenemos una referencia al canvas
canvas = document.getElementById('canvas');

// Y a su "contexto 2d"
ctx = canvas.getContext('2d');

// Hoy pintamos de rojo
ctx.fillStyle = "#f00";

// Creamos el listener
canvas.addEventListener('click', function(ev) {
    // Borramos
    ctx.clearRect(0, 0, 300, 300);
        
    // Comenzamos una figura
    ctx.beginPath();  
    
    // Creamos el circulo
    ctx.arc(ev.clientX, ev.clientY, 25, 0, Math.PI*2, true);  
    
    // Cerramos la figura
    ctx.closePath();    
    
    // Y rellenamos
    ctx.fill();     
}, false);