HTML - Canvas API for graphics

HTML Canvas API for Graphics

1. Introduction to the <canvas> Element

The <canvas> element in HTML provides a space where graphics such as images, shapes, and animations can be drawn using JavaScript.

It is a powerful tool for creating interactive, dynamic visual content directly in the browser. You can use it for drawing 2D shapes, rendering images, creating graphs, and building game graphics.

Basic Syntax:

    <canvas id="myCanvas" width="500" height="500">
        Your browser does not support the canvas element.
    </canvas>
    

In the above example, the <canvas> tag creates a drawing area with a width of 500px and height of 500px. The text inside the <canvas> element is displayed if the browser does not support canvas rendering.

2. Accessing the Canvas Context

To draw on the canvas, we need to access its context, which is an object that provides methods and properties for drawing shapes, images, and other graphics.

For 2D graphics, the context type is "2d", and you can access it using JavaScript.

Example:

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

Here, getContext("2d") gives access to the 2D rendering context, allowing you to start drawing shapes and lines.

3. Drawing on the Canvas

Once the context is accessed, you can start drawing shapes such as lines, rectangles, circles, and more.

Example: Drawing a Rectangle

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

        // Draw a rectangle
        ctx.fillStyle = "#FF0000"; // Set the fill color to red
        ctx.fillRect(50, 50, 150, 100); // Draw a filled rectangle
    </script>
    

In this example, fillRect() draws a red rectangle at coordinates (50, 50) with a width of 150px and height of 100px.

Example: Drawing a Line

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

        // Draw a line
        ctx.beginPath(); // Start a new path
        ctx.moveTo(20, 20); // Move to the starting point (x, y)
        ctx.lineTo(200, 200); // Draw a line to (x, y)
        ctx.stroke(); // Apply the stroke to make the line visible
    </script>
    

The moveTo() method sets the starting point for the line, while lineTo() defines the ending point. The stroke() method renders the line on the canvas.

4. Drawing Circles and Arcs

Canvas also allows you to draw circles and arcs using the arc() method, which defines the start and end points of the arc, along with its radius and other properties.

Example: Drawing a Circle

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

        // Draw a circle
        ctx.beginPath();
        ctx.arc(200, 200, 50, 0, 2 * Math.PI); // Circle at (200, 200) with radius 50
        ctx.fillStyle = "blue";
        ctx.fill(); // Fill the circle with blue color
    </script>
    

The arc() method creates a circle with the center at (200, 200), radius 50, and spans a full circle (from 0 to 2π radians).

5. Working with Images on the Canvas

You can also draw images onto the canvas. To do this, you use the drawImage() method.

Example: Drawing an Image

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

        var img = new Image(); // Create a new image object
        img.src = "image.jpg"; // Set the source of the image

        img.onload = function() {
            ctx.drawImage(img, 50, 50); // Draw the image at coordinates (50, 50)
        };
    </script>
    

In this example, the image is loaded and drawn onto the canvas once it has fully loaded using the onload event.

6. Animation with the Canvas

The canvas also allows you to create animations by repeatedly drawing graphics in a loop, changing their properties (like position or size) over time.

Example: Simple Animation

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

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
            ctx.beginPath();
            ctx.arc(x, 50, 20, 0, 2 * Math.PI); // Draw a circle
            ctx.fillStyle = "green";
            ctx.fill();
            x += 1; // Move the circle to the right
            requestAnimationFrame(animate); // Request the next frame
        }

        animate(); // Start the animation
    </script>
    

This example animates a circle moving from left to right by updating its position and calling requestAnimationFrame() for continuous animation.

The <canvas> element provides a versatile space for creating dynamic graphics and animations using JavaScript. It is widely used for building games, data visualizations, image manipulation, and interactive applications directly within the browser.