Canvas Rendering

Canvas Initialization (DPI-Aware)

function initCanvas(canvasEl, width, height) {
  const dpr = window.devicePixelRatio || 1;
  canvasEl.width = width * dpr;
  canvasEl.height = height * dpr;
  canvasEl.style.width = `${width}px`;
  canvasEl.style.height = `${height}px`;
  const ctx = canvasEl.getContext('2d');
  ctx.scale(dpr, dpr);
  return ctx;
}