Scale canvas to viewport size

by Arjan Haverkamp

HTML

<canvas id="c" style="width:100%; height:200px; border:1px solid #000"></canvas>

JavaScript

function fitCanvasToCSS(canvas) {
  const dpr = window.devicePixelRatio || 1;
  const rect = canvas.getBoundingClientRect();
  canvas.width  = Math.round(rect.width  * dpr);
  canvas.height = Math.round(rect.height * dpr);
  const ctx = canvas.getContext("2d");
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0); // keep drawing in CSS pixels
  return ctx;
}

const canvas = document.getElementById("c");
function render() {
   const ctx = fitCanvasToCSS(canvas);
   console.log(canvas.width, canvas.height);
   ctx.fillStyle = 'red';
   ctx.fillRect(0, 0, canvas.width, canvas.height);
}

render();
addEventListener("resize", render);