HTML5 Canvas

The HTML5 <canvas> element provides a drawing area that can be controlled using JavaScript.

It can be used to create graphics, charts, drawings, animations, games, and other dynamic visual content.

1. How Canvas Works

2. What is the canvas Element?

The <canvas> element creates a rectangular area where graphics can be drawn.

<canvas id="myCanvas"
        width="400"
        height="200">
</canvas>

The width and height attributes define the drawing area's dimensions.

3. A Canvas by Itself

Canvas creates the drawing area, but it does not automatically draw shapes or graphics.

The blank area above is a canvas. JavaScript is needed to draw inside it.

4. Getting the Canvas Context

JavaScript normally gets a drawing context from the canvas. The 2D context is commonly used for two-dimensional drawings.

<canvas id="myCanvas"
        width="400"
        height="200">
</canvas>

<script>

    const canvas = document.getElementById("myCanvas");

    const ctx = canvas.getContext("2d");

</script>

Here, ctx represents the 2D drawing context.

5. Drawing a Rectangle

The fillRect() method draws a filled rectangle.

ctx.fillRect(50, 40, 150, 80);

The values represent the rectangle's position and size.

6. Canvas Drawing Example

7. Drawing a Line

Canvas can also draw lines using paths.

ctx.beginPath();

ctx.moveTo(50, 50);
ctx.lineTo(250, 120);

ctx.stroke();

8. Drawing a Circle

The arc() method can be used to create circular shapes.

ctx.beginPath();

ctx.arc(150, 80, 50, 0, 2 * Math.PI);

ctx.stroke();

9. Drawing Text

Canvas can also display text using methods such as fillText().

ctx.font = "24px Arial";

ctx.fillText("Hello Canvas", 50, 80);

10. Drawing a Simple Shape

Canvas becomes useful when multiple drawing operations are combined.

ctx.beginPath();

ctx.moveTo(50, 120);
ctx.lineTo(120, 40);
ctx.lineTo(190, 120);
ctx.closePath();

ctx.stroke();

11. Canvas vs SVG

Both Canvas and SVG can be used for graphics, but they work differently.

12. Common Uses of Canvas

• Games
• Charts and graphs
• Drawing applications
• Animations
• Image processing
• Interactive visualizations

13. Canvas Dimensions

Canvas dimensions should normally be defined using the width and height attributes.

<canvas
    width="600"
    height="300">
</canvas>

14. Canvas Coordinate System

15. Styling Canvas Drawing

JavaScript can change properties such as the fill style, stroke style, and line width before drawing.

ctx.fillStyle = "black";

ctx.fillRect(50, 50, 150, 80);

The drawing properties are applied when the drawing operation is performed.

16. Complete Simple Canvas Example

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

<script>

    const canvas = document.getElementById("myCanvas");

    const ctx = canvas.getContext("2d");

    ctx.fillRect(50, 50, 150, 80);

    ctx.beginPath();

    ctx.arc(300, 90, 40, 0, 2 * Math.PI);

    ctx.stroke();

    ctx.font = "22px Arial";

    ctx.fillText("Canvas", 200, 180);

</script>

17. Canvas and JavaScript

Canvas does not provide a high-level drawing language by itself. JavaScript is typically used to control the drawing operations.

This makes canvas useful for interactive applications because JavaScript can change the drawing according to user actions or application data.

18. Common Mistakes

Mistake 1: Forgetting the canvas ID

JavaScript usually needs a way to locate the canvas element, so giving it an appropriate id is useful.

Mistake 2: Forgetting getContext()

You need a drawing context before using common Canvas 2D drawing methods.

Mistake 3: Expecting Canvas to draw automatically

The canvas element creates the drawing surface. JavaScript performs the actual drawing.

Mistake 4: Confusing Canvas with SVG

Canvas and SVG both support graphics, but their approaches and suitable use cases are different.

19. Best Practices

• Give the canvas a meaningful ID when JavaScript needs to access it.
• Set appropriate canvas dimensions.
• Use JavaScript for drawing and interaction.
• Choose Canvas when dynamic drawing is appropriate.
• Consider SVG when individual scalable graphic elements are important.
• Provide suitable alternatives when the graphic contains important information.

20. Practice Example

Create a canvas and draw:

• One rectangle
• One circle
• One line
• One text message

<canvas id="practiceCanvas"
        width="500"
        height="250">
</canvas>

<script>

    const canvas =
        document.getElementById("practiceCanvas");

    const ctx =
        canvas.getContext("2d");

    ctx.fillRect(30, 30, 120, 70);

    ctx.beginPath();

    ctx.arc(250, 70, 40, 0, 2 * Math.PI);

    ctx.stroke();

    ctx.beginPath();

    ctx.moveTo(330, 30);
    ctx.lineTo(450, 100);

    ctx.stroke();

    ctx.font = "22px Arial";

    ctx.fillText(
        "My Canvas",
        160,
        180
    );

</script>