<canvas></canvas>
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

canvas {
  background-color: orange;
}
(() => {
  const $ = (el) => document.querySelector(el);
  const ctx = $('canvas').getContext('2d');
  const dpr = window.devicePixelRatio;

  const canvasWidth = window.innerWidth;
  const canvasHeight = window.innerHeight;

  $('canvas').style.width = canvasWidth + 'px';
  $('canvas').style.height = canvasHeight + 'px';

  $('canvas').width = canvasWidth * dpr;
  $('canvas').height = canvasHeight * dpr; 

  ctx.scale(dpr, dpr);
  ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
  ctx.fill();
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.