HTML Canvas Graphics

The HTML <canvas> element is used to draw graphics on a web page.

The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.

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 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="myCanvas1" width="200" height="110"></canvas>

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute.

Add a JavaScript

After creating the rectangular canvas area, you must add a JavaScript to do the drawing. Here are some examples:
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

Draw a Circle

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>

Key points of HTML Canvas

1. Basic Structure

• The <canvas> element itself is just a container for graphics; you must use JavaScript to actually draw anything.

2. Context

• To draw on the canvas, you need to access its 2D or WebGL (3D) rendering context.

3. Drawing Shapes

• You can draw basic shapes like rectangles, circles, and paths using the canvas 2D context.

4. Drawing Text

• You can draw basic shapes like rectangles, circles, and paths using the canvas 2D context.

5. Images

• You can draw images onto the canvas using the drawImage() method.

6. Animation

• You can create animations by repeatedly clearing and redrawing the canvas, typically using

7. Transformations

• You can scale, rotate, and translate shapes or images drawn on the canvas using methods like

8. Hit Detection

• You can detect interactions with canvas elements (such as mouse clicks) by calculating coordinates relative to the canvas.

9. Pixel Manipulation

• The getImageData() and putImageData() methods allow you to read and modify the pixel data of the canvas, enabling complex effects like filters or custom rendering.

10. Fallback Content

If a browser does not support the <canvas> element, any content between the opening and closing tags is displayed.