JSFiddle - React, Tailwind, and code Playground

by Kleofáš Hatlapatka

HTML

<canvas id="platno" width="900px" height="500px"></canvas>

CSS

#platno{
    border:1px solid red;
}

JavaScript

$(document).ready(function(){
    var ctx = document.getElementById("platno");
    var c = ctx.getContext("2d");
    var x = 200;
    var y = 10;
    var width = 50;
    var height = 50;
    
    var vert = 2;
    var hor = 2;
    var r = 1;
    var g = 1;
    var b = 1;
    
    
    function move (){
        c.clearRect(0, 0, ctx.width, ctx.height);
        c.fillStyle = "rgb(" +r+ "," +g+ "," +b+ ")";
        c.fillRect(x,y,width,height);
        x += hor;
        y += vert;
        g += hor;
        b += vert;
        
         if (y > (ctx.height - height) || y < 0){
             vert *= -1;
        }
        
        if (x > (ctx.width - width) || x < 0){
             hor *= -1;     
        }
        
        setTimeout(move, 3);
    }
    
    move();
    
        

        
            
    
    
    
});