JSFiddle - React, Tailwind, and code Playground

by agegorin

HTML

<canvas id="canvas"></canvas>

CSS

*{
            margin:0;
            padding: 0;
        }
        body{
            background: black;
            overflow: hidden;
        }

JavaScript

window.requestAnimFrame = (function(){
            return  window.requestAnimationFrame       ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame    ||
                    window.oRequestAnimationFrame      ||
                    window.msRequestAnimationFrame     ||
                    function(/* function */ callback, /* DOMElement */ element){
                        window.setTimeout(callback, 1000 / 60);
                    };
        })();

        var canvas = document.getElementById("canvas"),
            ctx = canvas.getContext("2d"),
                x, y, dx, dy;


        canvas.width = document.width || 800;
        canvas.height = document.height || 800;

        var img = new Image();
        img.onload = function(){
            // Координаты вычисляются для центрирования изображения на Canvas
            x = canvas.width / 2 - img.width / 2;
            y = canvas.height / 2 - img.height / 2;
            dx = img.width;
            dy = img.height;
            init();
        };
        img.src = "http://habrastorage.org/storage2/47d/b1b/604/47db1b604fdfd609478f1d23263ee4f3.png";

        var init = function(){
            ctx.drawImage( img, x, y, dx, dy);

            x -= 1;
            y -= 1;
            dx += 2;
            dy += 2;
            if(x < 0 && y < 0) {
                ctx.clearRect(0,0,canvas.width,canvas.height);
                x = canvas.width / 2 - img.width / 2;
                y = canvas.height / 2 - img.height / 2;
                dx = img.width;
                dy = img.height;
            }
            
            requestAnimFrame(init, canvas);
        }