عرض قماشي حاد على شاشات DPI وشاشات Retina العالية

function setupCanvas(canvas) {
  const ctx = canvas.getContext('2d');

  function resize() {
    const ratio = Math.min(window.devicePixelRatio || 1, 2); // cap for performance
    const { width, height } = canvas.getBoundingClientRect(); // CSS size

    canvas.width = Math.round(width * ratio);   // backing store in device pixels
    canvas.height = Math.round(height * ratio);
    ctx.setTransform(ratio, 0, 0, ratio, 0, 0); // draw in CSS pixels
    draw(ctx, width, height);
  }

  new ResizeObserver(resize).observe(canvas);
  resize();
}

function draw(ctx, width, height) {
  ctx.clearRect(0, 0, width, height);
  ctx.lineWidth = 1;
  ctx.strokeRect(0.5, 0.5, width - 1, height - 1); // crisp 1px border
}