JSFiddle - React, Tailwind, and code Playground

JavaScript

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

var Luokka = function () {
	this.canvas = null;
	this.ctx = null;
	this.x = 0;
	this.y = 0;
	this.width = 300;
	this.height = 200;
	this.lastUpdate = 0;
}

Luokka.prototype = {
	init: function () {
		this.canvas = document.createElement("canvas");
		this.canvas.width = window.innerWidth;
		this.canvas.height = window.innerHeight;
		this.ctx = this.canvas.getContext("2d");
		$("body").append(this.canvas);
	},
	
	update: function (time) {
		var delta = time - this.lastUpdate;
		this.lastUpdate = time;
		this.x += delta * 0.1;
		this.draw();
	},
	
	draw: function () {
		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
		this.ctx.fillRect(this.x, this.y, this.width, this.height);
	},
	
	startUpdating: function () {
		var self = this;
		window.requestAnimationFrame(function (time) {
			self.update(time);
			self.startUpdating();
		});
	}
};

$(document).ready(function () {
	var olio = new Luokka();
	olio.init();
	olio.startUpdating();
});