[canvas] canvas collection #canvas

canvas_base.js

const $graph = document.getElementById("graph");
const pixelRatio = Math.ceil(window.devicePixelRatio);

const context = $graph.getContext("2d");
const width = $graph.offsetWidth;
const height = $graph.offsetHeight;

$graph.height = height * pixelRatio;
$graph.width = width * pixelRatio;

if (pixelRatio > 1) {
  context.scale(pixelRatio, pixelRatio);
}

loop.js

class BaseFramework {
  constructor(canvas) {
    this.canvas = canvas;
    this.nextTick = Date.now();
    this.active = true;

    window.addEventListener("blur", this.pause);
    window.addEventListener("focus", this.resume);
  }
  clearCanvas() {
    const { ctx, width, height } = this.canvas;

    ctx.clearRect(0, 0, width, height);
  }
  drawBackground() {
    const { ctx, width, height } = this.canvas;

    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, width, height);
  }
  pause = () => {
    this.active = false;
  };
  resume = () => {
    this.active = true;
    this.nextTick = Date.now();
    this.tick();
  };
}