JSFiddle - React, Tailwind, and code Playground

by hugoruscitti

HTML

<canvas width="256" height="256"></canvas>

CSS

canvas {
  border: 1px solid red;
  image-rendering: pixelated;
  width: 128px;
  height: 128px;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
	const canvas = document.querySelector("canvas");
  const ctx = canvas.getContext("2d");
  const dpi = window.devicePixelRatio;
  ctx.lineWidth = 1;
	ctx.moveTo(2, 2);
	ctx.lineTo(100.5, 100);
	ctx.stroke();
})