HTML - Canvas

Overview

Estimated time: 25–35 minutes

Canvas provides an imperative drawing surface controlled by JavaScript.

Example

<canvas id="c" width="300" height="150"></canvas>
<script>
  const ctx = document.getElementById('c').getContext('2d');
  ctx.fillStyle = '#4f46e5';
  ctx.fillRect(20, 20, 120, 60);
  ctx.strokeStyle = '#22c55e';
  ctx.beginPath(); ctx.arc(200, 75, 40, 0, Math.PI*2); ctx.stroke();
</script>

Try it

Common Pitfalls

• Forgetting to account for device pixel ratio (blurry rendering on HiDPI).