Draws a high DPI canvas with text

by Rajesh Danabal

HTML

<canvas id="mainCanvas"></canvas>
<script>
  const canvas = document.getElementById('mainCanvas');
  const width = 500;
  const height = 500;
  const dpr = 2;

  // Set real pixel size
  canvas.width = width * dpr;
  canvas.height = height * dpr;

  // Set on-screen size
  canvas.style.width = `${width}px`;
  canvas.style.height = `${height}px`;

  const ctx = canvas.getContext('2d');

  // Scale everything
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

  // Draw something
  ctx.fillStyle = 'tomato';
  ctx.fillRect(0, 0, 500, 500);
  ctx.fillStyle = 'white';
  ctx.font = '20px sans-serif';
  ctx.fillText('Hello High DPI', 20, 40);
</script>