JSFiddle - React, Tailwind, and code Playground

by gooodwin67

HTML

<canvas id = 'myCanvas' width = '500' height = '300'></canvas>

CSS

body {
  background: #232425;
  color: #ccc;
}
canvas {
  border: 1px solid #ccc;
}

JavaScript

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

var n = 4;

var x = 10;
var y = 10;

function draw(x,y) {
	ctx.fillRect(x,y,20,20);
}

function move() {
	x += n;
  if (x > canvas.width || x < 0) {
  	n = -n
  }
}

function game() {
	ctx.clearRect(0,0, canvas.width, canvas.height)
  draw(x,y);
  move();
  
	requestAnimationFrame(game)
}

game();