Learn Java, Angular, SQL with Coding Exercises & Career Tips

HTML Canvas

The HTML <canvas> element provides a powerful way to draw graphics directly on a web page using JavaScript. It's like a digital drawing board that allows you to create:

Shapes

Text

Images

Animations

Syntax:

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

This creates a rectangular drawing area on the screen. To actually draw on it, you will need JavaScript and its 2D rendering context.

Setting Up Canvas for Drawing

<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
</script>

canvas: Selects the canvas element from the page.

ctx: Gets the 2D drawing context, which lets you use drawing functions.

Common Canvas Methods

Method	Description	Syntax Example
fillRect()	Draws a filled rectangle	ctx.fillRect(x, y, width, height);
strokeRect()	Draws only the border of a rectangle	ctx.strokeRect(x, y, width, height);
clearReact()	Clears a rectangular area	ctx.clearRect(x, y, width, height);
beginPath()	Starts a new drawing path	ctx.beginPath();
moveTo()	Moves the pen to a position	ctx.moveTo(x, y);
lineTo()	Draws a line from the current point	ctx.lineTo(x, y);
stroke()	Outlines the current shape	ctx.stroke();
fillText()	Draws filled text	ctx.fillText("Hello", x, y);
strokeText()	Draws text outline	ctx.strokeText("Hello", x, y);

Example: Drawing a Line


<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');

   ctx.beginPath();
   ctx.moveTo(50, 50);
   ctx.lineTo(200, 50);
   ctx.lineTo(200, 200);
   ctx.closePath();
   ctx.stroke();
</script>

Output:

Example: Drawing Rectangles


<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');

   ctx.fillStyle = 'blue';
   ctx.fillRect(10, 10, 150, 100);  // Filled rectangle

   ctx.strokeStyle = 'red';
   ctx.strokeRect(200, 10, 150, 100);  // Bordered rectangle

</script>

Output:

Example: Drawing a Circle


<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');

   ctx.beginPath();
   ctx.arc(95, 50, 40, 0, 2 * Math.PI); // x, y, radius, startAngle, endAngle
   ctx.stroke();

</script>

Output:

Example: Drawing Text


<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');

   ctx.font = "30px Arial";
   ctx.fillText("Graphics by QUIPOIN", 10, 50);

</script>

Output:

Creating Color Gradients

1. Linear Gradient


<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');

   var grd = ctx.createLinearGradient(0, 0, 200, 0);
   grd.addColorStop(0, "red");
   grd.addColorStop(1, "white");

   ctx.fillStyle = grd;
   ctx.fillRect(10, 10, 150, 80);

</script>

Output:

2. Radial Gradient


<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');

   var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
   grd.addColorStop(0, "red");
   grd.addColorStop(1, "white");

   ctx.fillStyle = grd;
   ctx.fillRect(10, 10, 150, 80);

</script>

Output:

Drawing Images in Canvas

You can also render images on the canvas:


<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');

   var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
   grd.addColorStop(0, "red");
   grd.addColorStop(1, "white");

   ctx.fillStyle = grd;
   ctx.fillRect(10, 10, 150, 80);

</script>

Make sure the image path is correct and accessible.

Two Minute Drill

<canvas> is used for drawing 2D graphics with JavaScript.

Use .getContext('2d') to start drawing.

Supports shapes, text, gradients, and images.

Ideal for games, animations, and interactive visualizations.