HTML Tutorial

HTML Tag: <canvas>

Usage of <canvas>

  • Used to create pixel-based graphics on web pages.
  • Allows for dynamic drawing and manipulation of canvas elements.

Attributes of <canvas>

Attribute Description
width Specifies the width of the canvas in pixels
height Specifies the height of the canvas in pixels

Examples with <canvas>

  • Drawing lines: ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(100, 100); ctx.stroke();
  • Drawing rectangles: ctx.fillRect(0, 0, 100, 100);
  • Drawing circles: ctx.beginPath(); ctx.arc(50, 50, 50, 0, 2 * Math.PI); ctx.stroke();

Exploring the <canvas> Tag

HTML:

<canvas id="myCanvas" width="500" height="500"></canvas>

JavaScript:

// Get the canvas element
const canvas = document.getElementById('myCanvas');

// Get the context of the canvas
const ctx = canvas.getContext('2d');

// Draw a circle
ctx.beginPath();
ctx.arc(250, 250, 100, 0, 2 * Math.PI);
ctx.stroke();

This code creates a canvas and draws a circle on it. You can play around with different drawing methods to create more complex graphics.