JSFiddle - React, Tailwind, and code Playground

by Aijoona

HTML

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

CSS

canvas {
    border: solid 1px #ccc;
    margin: 20px;
}

JavaScript

// Nuestras variables
var canvas, ctx, x, y;

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

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

// Generamos las coordenadas iniciales
x = 0;
y = 0;

// Los frames seran renderizados por este intervalo
// aproximadamente a 24 frames por segundo (fps)
setInterval(function() {
    
    // Limpiamos el canvas, eliminando el contenido
    // desde el punto (0, 0) al punto (100, 100)
    ctx.clearRect(0, 0, 100, 100);    
    
    // Generamos nuevas coordenadas
    // Que basicamente representan un desplazamiento lineal
    x = x >= 100 ? 0 : x + 1;
    y = y >= 100 ? 0 : y + 1;
    
    // Y dibujamos nuevamente
    ctx.fillRect(x, y, 50, 50);
    
}, 1000 / 24);