What is HTML Canvas?

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.

The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Canvas is supported by all major browsers.

Canvas Examples

A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

The markup looks like this:

<canvas id="myCanvas" width="200" height="100"></canvas>
  1. HTML Canvas: HTML5 element for drawing graphics with JavaScript.
  2. getContext('2d'): Method to get the 2D drawing context.
  3. Basic drawing methods: Drawing shapes, lines, text, etc.
  4. Coordinates and sizes: Canvas has its own coordinate system.
  5. Simple shapes and paths: Drawing rectangles, circles, lines, and complex paths.
  6. Color and style: Managing line and fill colors, styles, and thickness.
  7. Text and fonts: Drawing text with specified font, size, and color.
  8. Event handling: Handling mouse clicks, key presses, etc.
  9. Animation: Creating animations using requestAnimationFrame() or setInterval().
  10. Cross-browser compatibility: Ensuring compatibility across major browsers and devices.
  11. clearRect(x, y, width, height): Clears the specified rectangular area of the canvas.