es6 canvas

playing

by schrodingers

CSS

body {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

Babel + JSX

let canvas, ctx;
let x = 0,
  y = 0;

function init(width = window.innerWidth, height = window.innerHeight) {
  canvas = document.createElement("canvas");
  ctx = canvas.getContext("2d");
  document.body.appendChild(canvas);
  canvas.width = width;
  canvas.height = height;
}

function draw() {
  ctx.fillStyle = "#111";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#fff';
  ctx.fillRect(x, y, 100, 100);

}


function animate() {
  requestAnimationFrame(animate);
  draw();
}

init();
animate();