canvas boilerplate

index.js

document.head.appendChild(document.createElement('style')).textContent = `
body { margin: 0; overflow: hidden; }
canvas { width: 100%; height: 100%; }
`;
const canvas = document.body.appendChild(document.createElement('canvas'));
(window.onresize = () => {
  const {width, height} = canvas.getBoundingClientRect()
  canvas.width = width * devicePixelRatio
  canvas.height = height * devicePixelRatio
  frame()
})();

function frame() {
  const ctx = canvas.getContext('2d')
  ctx.scale(devicePixelRatio, devicePixelRatio)
  render(ctx)
}

function render(ctx) {
  ctx.moveTo(10, 10)
  ctx.lineTo(100, 100)
  ctx.stroke()
}