Visual Fiha canvas layer boilerplate

index.html

<canvas id="canvas" width="400" height="300"></canvas>

script.js

function drawCtx(ctx) {
  var cache = this.cache || {};
  cache.frame = cache.frame || 0;
  cache.frame++;
  
  var cw = ctx.canvas.width * 0.5;
  var ch = ctx.canvas.height * 0.5;
  var txt = cache.frame + ' ' + this.screenState.frametime + ' ' + this.screenState.firstframetime + ' ';
  ctx.fillText(txt, cw, ch);
};

// vvvvvvvvv the rest is just here to emulate vvvvvvvvv


var canvas = document.getElementById('canvas');
canvas.parentNode.style.backgroundColor = '#eee';
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
var context = canvas.getContext('2d');
var layer = {
  cache: {},
  screenState: {
    frametime: 0,
    firstframetime: performance.now()
  }
};

function animate() {
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  drawCtx.call(layer, context);
  window.requestAnimationFrame(animate);
}

animate();

visual-fiha-canvas-layer-boilerplate.markdown

Visual Fiha canvas layer boilerplate

A boilerplate for Visual Fiha (https://zeropaper.github.io/visual-fiha) canvas layer drawing function.

A Pen by Valentin Vago on CodePen.

License.