<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();
})();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.