HTML Canvas

The <canvas> element is used to draw graphics using JavaScript.
It creates a bitmap drawing area.

Basic Canvas Example

<canvas 
  id="myCanvas"
  width="300"
  height="150"
  style="border:1px solid #000;">
</canvas>

Drawing on Canvas (JavaScript)

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");

  ctx.fillStyle = "blue";
  ctx.fillRect(20, 20, 100, 50);
</script>

Canvas Attributes

• id → reference canvas in JavaScript
• width → canvas width
• height → canvas height

Important Notes

• Canvas content is not accessible by default
• Drawings are not scalable without quality loss
• Requires JavaScript to work