JSFiddle - React, Tailwind, and code Playground

by Alex Insayt

HTML

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

JavaScript

//RAF Shim
(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

var canvas = document.getElementById('canvas');
canvas.width = 400;
canvas.height = 400;
var ctx = canvas.getContext('2d');


/*
  Главный цикл игры
*/
var lastTime = Date.now();

function mainLoop(){
    var now = Date.now();
    var dt = (now - lastTime) / 1000;
    
    update(dt);
    render();
    
    lastTime = now;    
    requestAnimationFrame(mainLoop);
}


/*
    Тут будут все перерасчеты
*/
function update(dt){
    
}

/*
   Тут будет отрисовка
*/
function render(){
    clearStage()
}

/*
    Чистка сцены
    @TODO: заменить на img паттерн
*/
function clearStage(){
    ctx.fillStyle = "black";
    ctx.fillRect(0,0,canvas.width,canvas.height);   
}

mainLoop();