How to Draw on the HTML Canvas
The HTML5 canvas element allows developers to draw and animate graphics using
JavaScript. A common example is moving a circle across the canvas
from left to right, which demonstrates how to update positions frame by frame.
We'll will draw a circle - our body - using the arc method of the canvas JavaScript context object.
First, we need an HTML page with a '<canvas>' element,
as shown on How to Draw Graphs with JavaScript on the HTML Canvas, where the animation will run.
Using 'setTimeout' and 'clearRect' for Smooth Motion
In this tutorial, we'll learn how to animate a circle across an HTML5 canvas using JavaScript.
By moving objects with 'setTimeout' or 'requestAnimationFrame', you can create smooth JavaScript canvas animations.
The key steps are clearing the canvas with 'clearRect' and redrawing the object as it moves.
The clearRect() method ensures that old drawings are erased before redrawing.
Without it, the moving shape would leave trails across the canvas. This approach
lets you create smooth JavaScript object movement on canvas.
Animating a Circle Across HTML5 Canvas
To make the circle appear to move across the HTML canvas, i.e., animate the circle. we'll
simply draw the circle with JavaScript repeatedly, changing its position
progressively as well as clearing the previous image.
Step-by-Step Guide: JavaScript Canvas Movement
To animate, we follow three main steps:
- Clear the canvas using
clearRect()
- Redraw the object at a new position
- Repeat the process using
setInterval() or requestAnimationFrame()
This technique is the basis of object motion in JavaScript canvas and is used in games,
interactive graphics, and physics simulations.
Create a new file; On Notepad++: File, New.
Call it moving_body.html.
Type out the adjoining JavaScript code for animating an image body across the HTML canvas.
How the JavaScript Move Object Animation Code Works
- 'context.clearRect()' clears the previous drawing so the circle doesn't leave a trail.
- 'context.arc()' draws the circle.
- The variable 'x' increases every frame, so the circle glides across the canvas.
- 'setTimeout()' creates the animation loop.
Improving the Animation
Instead of 'setTimeout', you can use 'requestAnimationFrame()' for smoother performance.
What You've Learnt on HTML5 Canvas and JavaScript Animation
In this step-by-step JavaScript canvas animation tutorial, we have learnt
how to move an object across the HTML5 canvas. By repeatedly clearing
and redrawing shapes, you can animate circles, squares, or even custom images
to glide smoothly across the screen. This is one of the foundations of creating
animations in JavaScript.
Key Takeaways on HTML5 Canvas and JavaScript Animation
You've just learned how to move an object across an HTML5 canvas using JavaScript.
Key concepts included:
- Drawing and animating shapes with 'context.arc()'
- Clearing the canvas with 'clearRect()'
- Creating a simple JavaScript canvas animation loop
- Using 'requestAnimationFrame' for better motion
With these basics, you can expand your project into bouncing balls, moving images, or full game graphics.
So! JavaScript Fun Practice Exercise - Animate Circle
As a fun practice exercise, try changing the speed, direction, or shape. This will help you
understand more about JavaScript graphics drawing and updating positions.
JavaScript Animation Code for moving_body.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Moving Body</title>
</head>
<body>
<h3>Make a Body Move Across the Canvas</h3>
<canvas id="move_body" width="500" height="300" style="border: 1px solid #000000;">
Your browser (version) does not support canvas object; Time to update!
</canvas>
<button onclick="doGlide()">Glide</button>
<button onclick="clearTimeout(clr_obj)">Stop</button>
<script>
var canvas = document.getElementById("move_body");
var context = canvas.getContext("2d");
context.fillStyle = "#888888";
var x = 50;
var y = 150;
var radius = 40;
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI);
context.fill();
var clr_obj;
function doGlide() {
if (x <= 440) {
context.clearRect(x - radius - 10, y - radius, 80, 80);
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI);
context.fill();
x += 10;
clr_obj = setTimeout(function(){doGlide();}, 50);
}
}
</script>
</body>
</html>
