Hi-Res Canvas 2D

A wrapper around CanvasRenderingContext2D to handle HiDPI scaling

import { HighResCanvasRenderingContext2D } from "hires-canvas2d";

const canvas = document.querySelector("canvas");
const context = new HighResCanvasRenderingContext2D(canvas.getContext("2d"), window.devicePixelRatio);

function resize() {
  context.dpr = window.devicePixelRatio;
}

window.addEventListener("resize", resize);

It just works!*

*apart from fonts which still need some attention with a multiplication such as:

context.font = `normal ${32 * dpr}px sans-serif`;