How to Draw on the HTML Canvas
We'll will draw a circle - our body - using the arc method of the canvas JavaScript context object.
Animating a Body
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.
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.
JavaScript 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");
// color for our moving body(circle)
context.fillStyle = "#888888";
var x = 50;
var y = 150;
var radius = 40;
// draw a circle
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI);
context.fill();
var clr_obj;
function doGlide() {
// condition for continuing motion
if (x <= 440) {
// erase previous circle
context.clearRect(x - radius - 10, y - radius, 80, 80);
// redraw circle
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI);
context.fill();
x += 10;
clr_obj = setTimeout(function(){doGlide();}, 50);
}
}
</script>
</body>
</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");
// color for our moving body(circle)
context.fillStyle = "#888888";
var x = 50;
var y = 150;
var radius = 40;
// draw a circle
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI);
context.fill();
var clr_obj;
function doGlide() {
// condition for continuing motion
if (x <= 440) {
// erase previous circle
context.clearRect(x - radius - 10, y - radius, 80, 80);
// redraw circle
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI);
context.fill();
x += 10;
clr_obj = setTimeout(function(){doGlide();}, 50);
}
}
</script>
</body>
</html>