HTML CSS - Canvas

Using the canvas element for drawing

The <canvas> element is used to draw graphics on a web page using JavaScript. It provides a drawable region in your HTML document where you can render graphics, charts, animations, and other visual images on the fly. This tutorial covers how to use the canvas element for drawing.

Basic Canvas Example

Here is a basic example of using the <canvas> element to draw a rectangle:

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(0, 0, 150, 75);
</script>
            

Drawing Shapes

The Canvas API provides methods for drawing various shapes. Here are examples of drawing a circle and a line:

<canvas id="shapeCanvas" width="400" height="200" style="border:1px solid #000000;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

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

    // Draw a circle
    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw a line
    ctx.moveTo(200, 50);
    ctx.lineTo(300, 150);
    ctx.stroke();
</script>
            

Drawing Text

You can draw text on the canvas using the fillText and strokeText methods. Here is an example:

<canvas id="textCanvas" width="400" height="200" style="border:1px solid #000000;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

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

    ctx.font = '30px Arial';
    ctx.fillText('Hello World', 50, 100);
    ctx.strokeText('Hello World', 50, 150);
</script>
            

Drawing Images

You can draw images on the canvas using the drawImage method. Here is an example:

<canvas id="imageCanvas" width="400" height="200" style="border:1px solid #000000;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById('imageCanvas');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 10, 10);
    };
    img.src = 'https://via.placeholder.com/150';
</script>
            

Canvas Transformations

The Canvas API provides methods for scaling, rotating, and translating the canvas. Here is an example of rotating an element:

<canvas id="transformCanvas" width="400" height="200" style="border:1px solid #000000;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

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

    // Rotate the rectangle
    ctx.translate(200, 100);
    ctx.rotate(45 * Math.PI / 180);
    ctx.fillStyle = 'lightgreen';
    ctx.fillRect(-50, -50, 100, 100);
</script>
            

Summary

In this tutorial, you learned about using the <canvas> element for drawing. The canvas element allows you to create graphics, animations, and other visual elements directly within your HTML document using JavaScript. You explored drawing shapes, text, images, and applying transformations. Understanding and using the canvas element can help create dynamic and interactive web content.