Star hyperspace

by Julien Roche

HTML

<body class="app">
  <canvas class="app__background"></canvas>
  <canvas class="app__stars"></canvas>
</body>

CSS

html,
body {
  border: none;
  height: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  position: relative;
  width: 100%;
}

.app__background {
  left: 0;
  position: absolute;
  top: 0;
  z-index: 1;
}

.app__stars {
  left: 0;
  position: absolute;
  top: 0;
  z-index: 2;
}

Babel + JSX

const backgroundElement = document.querySelector('.app__background');
const starsElement = document.querySelector('.app__stars');
const appElement = document.querySelector('.app');

function drawBackground() {
	const ctx = backgroundElement.getContext('2d');
	ctx.clearRect(0, 0, backgroundElement.width, backgroundElement.height);
  ctx.fillStyle='black';
	ctx.fillRect(0, 0, backgroundElement.width, backgroundElement.height);
}

function resize() {
	const bounds = appElement.getBoundingClientRect();
  const style = `height: ${bounds.height}px; width:${bounds.width}px;`;
  
  backgroundElement.setAttribute('style', style);
  starsElement.setAttribute('style', style);
  
  drawBackground();
}

window.addEventListener('resize', resize, false);

resize();