JSFiddle - React, Tailwind, and code Playground

by hugoruscitti

HTML

<canvas id='canvas' width=300 height=300>

JavaScript

var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');

var x = 0;
var y = 0;
var vx = 4;
var vy = 4;
var ancho = 50;

function dibujar() {
    c.fillStyle='rgba(255, 255, 255, 0.2)';
    c.fillRect(0, 0, 300, 300);
    
    c.fillStyle = 'blue'
    x += vx;
    y += vy;
    vy += 0.2;
    ancho = ancho * 0.95;
    c.fillRect(x, y, ancho, ancho);
}

setInterval(dibujar, 30);