learn2kode.in

Menu

HTML Tutorial

Menu

HTML Canvas

The <canvas> element in HTML is used to draw graphics dynamically using JavaScript.
It is widely used for:

  • Drawing shapes
  • Animations
  • Game graphics
  • Data visualizations
  • Image manipulation

Canvas provides a pixel-based drawing surface, unlike SVG which is vector-based.

Basic Canvas Syntax

Copy Text 
<canvas id="myCanvas" width="300" height="150"></canvas>

Without JavaScript, a canvas will remain blank.

Drawing on Canvas Using JavaScript

Here is a simple example that draws a blue line:

Copy Text 
<!DOCTYPE html>
<html>
<body>

<h2>Canvas Example</h2>

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

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

  // Draw a line
  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(200, 100);
  ctx.strokeStyle = "blue";
  ctx.lineWidth = 3;
  ctx.stroke();
</script>

</body>
</html>

1. Drawing Shapes

  • Lines
  • Rectangles (fillRect, strokeRect)
  • Circles (arc)
  • Paths

2. Colors & Styles

  • fillStyle
  • strokeStyle
  • Transparency

3. Text

  • fillText()
  • strokeText()

4. Images

  • drawImage()

5. Animation

  • Using requestAnimationFrame()
HTML APIs