DPI/PPI

<div class="row">
  <div class="chip"><canvas id="lo" width="12" height="12"></canvas><span class="cap">72 dpi</span></div>
  <div class="chip"><canvas id="hi" width="200" height="200"></canvas><span class="cap">300 dpi</span></div>
</div>

.row{display:flex;gap:8%;align-items:center;justify-content:center;width:100%;height:100%}
.chip{display:flex;flex-direction:column;align-items:center;gap:8px}
canvas{width:min(120px,34vw);aspect-ratio:1;border-radius:14px;box-shadow:0 0 0 1px var(--line);animation:breathe 3.6s ease-in-out infinite}
#lo{image-rendering:pixelated}
#hi{image-rendering:auto}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.cap{font:700 10px/1 ui-monospace,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

function draw(id, res) {
  const c = document.getElementById(id);
  const ctx = c.getContext('2d');
  const bg = getComputedStyle(document.documentElement).getPropertyValue('--surface') || '#fff';
  ctx.fillStyle = bg.trim() || '#fff';
  ctx.fillRect(0, 0, res, res);
  ctx.fillStyle = '#5b5bf7';
  ctx.beginPath();
  ctx.arc(res / 2, res / 2, res * 0.36, 0, Math.PI * 2);
  ctx.fill();
  ctx.fillStyle = '#f25c8a';
  ctx.fillRect(res * 0.1, res * 0.1, res * 0.22, res * 0.22);
}
draw('lo', 12);
draw('hi', 200);