What is the canvas element in HTML5?

The <canvas> element provides a scriptable bitmap drawing surface in HTML. It acts as an empty resolution-dependent drawing container that JavaScript manipulates via procedural drawing APIs:

### Rendering Contexts:

• 2D Context (getContext('2d')): Used for drawing paths, boxes, text, gradients, and 2D games.
• WebGL / WebGL2 (getContext('webgl')): Hardware-accelerated 3D graphics rendering powered by the client GPU (used by Three.js and Babylon.js).

### Code Example:

<canvas id="myCanvas" width="400" height="200"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  
  // Draw rectangle
  ctx.fillStyle = '#2563eb';
  ctx.fillRect(20, 20, 150, 100);
</script>

*Difference from SVG:* Canvas renders pixels onto a raster bitmap (faster for thousands of moving particles or video frame manipulation), whereas SVG is an XML DOM tree of vector shapes (infinitely scalable and individually inspectable in the DOM).