HTML5 Canvas Tutorial

 

HTML5 Canvas revolutionized the use of graphics on web pages. Since it is fully compatible with all major browsers, the vendor-related issues do not arise when we use it. On the other hand, it can easily be manipulated with the most popular scripting language on the internet at present - JavaScript.

In this tutorial, you will see a series of animations created on Canvas while using JavaScript.

  • The basics of canvas 2D context.
  • How to draw shapes and then enhance quality using patterns and gradients.
  • How to use canvas to create numerous impressive animations with JavaScript
Finding a good book to master HTML5 can be very challenging: there are so many around - most with eye-catching titles and very complex substance.
Therefore, Vivax Solutions strongly recommends Core HTML5 Canvas for those who really want to delve into HTML5.
Please click the image to access Amazon:

 

Let's take the plunge straightaway.

The following code snippet shows a simple way of using JavaScript in a web page - the easiest way of showing interactivity.

Type in the following script code in a text editor such as Notepad, save the page as .htm.

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Tutorial from Vivax Solutions</title>
<meta charset="UTF-8">
<script type="text/JavaScript">
alert('Welcome to Vivax Solutions');
</script>
</head>
<body>
</body>
</html>

Now press F5 and refresh your web page. You will get a trivial alert - and you ran the first JavaScript script successfully on a web page!

Note the presence of <!DOCTYPE html> at the top of HTML code; it is the only doctype declaration you need to get your HTML page up and running. It is as simple as that.

JavaScript commands must be written between <script></script>tags, as it is a script language. alert is a JavaScript command that produced the message as an alert. Please note the following:

  1. 1) JavaScript is case sensitive
  2. 2) JavaScript commands must end with a semi-colon

JavaScript commands can be used to write things as the content of a web page. Look at the following script.

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<script type="text/JavaScript">
document.write('My first web page is this. <br />It is pretty simple and plain');
</script>
</body>
</html>

Note the position of <br> tag. It helps start a new line whenever we need one.

In order to make use of the full potential of HTML5, you have to use JavaScript extensively. JavaScript is easy to learn and please follow this tutorial to master the language in a matter of hours.

Moreover, you can use this link to get a good knowledge in HTML5.

The following animation shows what can be achieved by the combination of HTML5 and JavaScript:

Magical HTML5 at Work - Interactive Spring

Please choose the speed, and then click the Run button.

Slow



Medium



Fast

 

Please stop the spring before changing the speed.

 

The source code for the animation is given below:

<!--hidden element to store the values for animation--------------->
<input type="hidden" id="h" value="0" />
<canvas id="Canvas_Two" width="400" height="300" style="border:2px solid red;" class="imgforcontent">
</canvas>
<!----radio buttons for speed control---------------------------->
<form name="spring" action="">
<input id="R4" name="speed" value="Slow" type="radio" />Slow<br /><br />
<input id="R5" name="speed" value="Medium" type="radio" />Medium<br /><br />
<input id="R6" name="speed" value="Fast" type="radio" />Fast<br /><br />
</form>
<!---------------buttons to start and stop the animation------------------------>
<div style="width:400px;">
<input type="button" style="float:left;margin-left:10px;" value="Run" onclick="anim1()" id="Animation" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" style="float:right;margin-right:10px;" value="Stop" onclick="window.clearInterval(xx)" id="Stopping" >
</div>
<canvas id="Canvas_Two" width="400" height="300" style="border:5px solid red"></canvas> <script> var canvas = document.getElementById('Canvas_Two');
var context1 = canvas.getContext('2d');
//code for static spring in grey colour
context1.beginPath();
context1.moveTo(200,0);
for(var i=0;i<=220;i++)
{
context1.lineTo(200 +20*Math.sin(5*i*Math.PI/180),i*0.5);
context1.lineWidth=5;
context1.strokeStyle='grey';
context1.stroke();
}
// code for the ball in blue colour
context1.beginPath();
context1.arc(200,100,35,0,2*Math.PI,false);
var grd = context1.createRadialGradient(200, 100, 5, 200, 100, 30);
// light blue
grd.addColorStop(0, '#8ED6FF');
// dark blue
grd.addColorStop(1, '#004CB3');
context1.fillStyle=grd;
context1.fill();
var a=1;
//code for the motion of the spring and the ball
function move(){
var x=eval(document.getElementById('h').value);
x=x+a
if (x==8){a=-1;}
if (x==4){a=1;}
context1.clearRect(0,0,400,300);
context1.beginPath();
context1.moveTo(200,0);
for(var i=0;i<=220;i++)
{
context1.lineTo(200 +20*Math.sin(5*i*Math.PI/180),i*x*0.1);
context1.lineWidth=5;
context1.strokeStyle='grey';
context1.stroke();
}
context1.beginPath();
context1.arc(200,x*20+40,35,0,2*Math.PI,false);
var grd = context1.createRadialGradient(200, x*20+40, 5, 200, x*20+40, 30);
// light blue
grd.addColorStop(0, '#8ED6FF');
// dark blue
grd.addColorStop(1, '#004CB3');
context1.fillStyle=grd;
context1.fill();
document.getElementById('h').value=x;
}
// code for timing
function anim1() {
if
(document.getElementById('R4').checked)
{ sp = 400; }
else if (document.getElementById('R5').checked) { sp = 300; }
else if (document.getElementById('R6').checked) { sp = 200; }
else
{ sp = 500; }
xx = window.setInterval('move()', sp);
}
// code for stopping
function stop1() {
//empty the hidden element on exit
document.getElementById('h2').value = 4;
window.clearInterval(xx);
}
</script>

"Where are the images?" you may wonder; there are no images. The ball, the spring and the gradient of the ball are produced only by combining HTML5 and JavaScript.

The rest of the tutorial is going to teach you how to produce similar effects by using HTML5, in the next few pages.

Please follow them in order; you will master the animations in a short period of time.


 

HTML 5 Canvas Tutorials

 

 

 

 

Resources at Fingertips

There is a significant selection of tutorials here, covering ASP.Net, HTML5, CSS3 and JavaScript. They are categorized clearly for you to access them easily on any device - desktops/laptops, smartphones and laptops.
There are quite a few of them on HTML5 Canvas and CSS3. In addition, there are tutorials on JavaScript and ASP.Net too.

Email: 

Stand Out - from the crowd

students

"There's no such thing as a free lunch."

The best things in nature are free with no strings attached - fresh air, breathtakingly warm sunshine, scene of meadow on the horizon...

Vivax Solutions, while mimicking nature, offers a huge set of tutorials along with interactive tools for free.

Please use them and excel in the sphere of science education.

Everything is free; not even registration is required.

 

 

Recommended Reading

 

The best book to master HTML5 canvas animations. The author tells you how to manipulate the canvas element with JavaScript in a progressive way - starting from the easier to harder worked examples. It is ideal for anyone who wants to be a game developer in HTML5.

Advertisements

Advertisement