Example Canvas Pages

by

Today, we will explore the realm of web design by honing in on Canvas elements. The HTML5 Canvas element provides a drawing area for scripting languages like JavaScript. It allows for the creation of shapes, animations, and even game graphics.

Let’s understand the canvas element with some examples.

Basic Canvas Example

First, we’ll start with a basic canvas element. Here’s an example:

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



This creates a canvas that is 200 pixels wide and 100 pixels tall with a border. The text “Your browser does not support the HTML5 canvas tag.” is displayed only if the browser does not support the canvas element.


Drawing on the Canvas


Let’s now draw an arc on the canvas. We will use the arc() method for this purpose.


<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>



This script first gets the canvas element using its ID, “myCanvas”. Then it creates a context object, ctx, which has all the methods needed to draw on the canvas. The beginPath() method starts a new path, and then the arc() method creates an arc. Finally, the stroke() method actually draws the path on the canvas.


Creating Animations


Canvas can also create animations. Let’s look at an example where we animate a small square moving across the canvas:


<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 0;

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(x, 10, 50, 50);
    x++;
    requestAnimationFrame(animate);
}

animate();
</script>



The clearRect() function clears the canvas before each new frame is drawn, and then the square is drawn at a new position. The requestAnimationFrame() method tells the browser to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.


The world of HTML5 canvas is vast and can be used to create a wide array of interactive graphics and animations. It offers a powerful tool for developers to add a better visual experience to their web pages. So, go ahead and experiment with it!