2d canvas context

This is used to demonstrate how a canvas inside a display:none iframe crashes.

by David Iglesias

HTML

<canvas id="canvas" width="200" height="100" />

JavaScript

let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
const nextColor = (() => {
  let current = "#f00";
  return () => current = current === "#f00" ? "#900" : "#f00";
})();

let lastRender = 0;

const frame = (t) => {
  window.requestAnimationFrame(frame);  
	if (t && t - lastRender < 500) return; 
  context.font = '35px sans-serif'; // this crashes (and maybe others)
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = nextColor();
  context.fillText('<blink />', 10, 50);
  lastRender = t;
}

frame();