HTML5 Tutorial From Scratch Till Advance Part 2

HTML5 Tutorial From Scratch Till Advance Level

Canvas Tag Colourful Strips

HTML5 Tutorial From Scratch Till Advance

Part II

I have written this HTML5 Tutorial from Scratch so that the beginners can also benefit from this. So far we have gone through web semantic tags, html5 form fields and new html5 attributes. Our next topic is html5 canvas.
19. HTML Canvas
HTML Canvas tag is used to draw 2d graphics, paths and insert images using javascript. Canvas tag is so powerful that whole computer game can be designed in one canvas tag. I am introducing these html5 tutorial concepts from scratch. So this would be very useful for beginners. Designing a game will go out of the scope of this tutorial as this tutorial is more focused on introducing a deep insight into html5 and all new features. But I would recommend that you take the basic knowledge of canvas from my tutorial and let your curiosity drive you to experiment new things with canvas tag. Honestly sky is the limit with html5. Internet is full of good articles on canvas and believe just search this string in google “canvas games tutorial” and believe me you’ll find bulk of good material on canvas that you can experiment with. Canvas is the most famous html5 tag and most of the internet browsers are doing their best to comply and support canvas features. Just start practicing with html5 and believe future is with html5 and the features that are not working with some browsers today will definitely start working with all the browsers in future.

Canvas normally defines the rectangular area on a web page but normally a canvas tag does not have data or any borders. Below is the basic syntax for a canvas tag where id field is mandatory.
Basic syntax:

1
<canvas id="”myfirstcanvas”" width="”250”" height="”250”"></canvas>

Example1: Specifying the border and the background color of a canvas

1
2
<canvas id="”myfirstcanvas”" width="”300”" height="”300”">
</canvas>

We talked about canvas drawing with javascript so let me tell you that all the drawing in a canvas takes place using javascript only. So let’s see how it’s done by looking at an example.

Example2. Draw in a canvas using javascript.

1
2
3
4
5
6
<script type="text/javascript">// <![CDATA[
var c=document.getElementById.(“myfirstcanvas”);
var ctx=c.getcontext(“2d”);
ctx.fillstyle=”#000ff1”;
ctx.fillRect=(1,1,10,10);
// ]]></script>

Try below example and you’ll get beautiful vertical colorful rectangular strips. Just copy paste below code in a note pad file and save as filename.html file. Open the internet browser file created in the same folder and see the beautiful effect with your own eyes.
Example:
Vertical spectrum of colorful rectangular strips created with a canvas tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<canvas id="myCanvas" style="border: 2px solid #123abc;" width="500" height="600">
</canvas><script type="text/javascript">// <![CDATA[
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FFqqqs";
ctx.fillRect(10,0,10,600);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF1df2";
ctx.fillRect(30,0,10,600);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(50,0,10,600);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(70,0,10,600);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="orange";
ctx.fillRect(90,0,10,600);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(100,0,10,600);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FFqqqs";
ctx.fillRect(120,0,10,600);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(150,0,10,600);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(170,0,10,600);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="orange";
ctx.fillRect(190,0,10,600);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(210,0,10,600);
// ]]></script>

3. Stright Line with Canvas Tag

1
2
3
4
5
6
7
8
<canvas id="myCanvas" style="border: 2px solid #123456;" width="500" height="600">
</canvas><script type="text/javascript">// <![CDATA[
var d=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveto(0,0);
ctx.lineto(500,500);
ctx.stroke();
// ]]></script>

4. Draw Circle with a Canvas Tag

1
2
3
4
5
6
7
8
<canvas id="myCanvas" style="border: 2px solid #123456;" width="500" height="600">
</canvas><script type="text/javascript">// <![CDATA[
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(235,250,190,0,2*Math.PI);
ctx.stroke();
// ]]></script>

So far we have learnt how to draw a rectangle, circle and a line in a canvas tag.

5. Below is the code to draw horizontal, vertical and inclined lines on a canvas. With this technique you can draw anything on your screen. The interesting thing about canvas tag is that the graphics drawn by canvas tag are not heavy as they are formed by just the pixels changing their colors.
Exampe:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<canvas id="myCanvas" style="border: 1px solid #d3d3d3;" width="200" height="100">
Your browser does not support the HTML5 canvas tag.</canvas><script type="text/javascript">// <![CDATA[
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(10,100);
ctx.moveTo(10,10);
ctx.lineTo(100,10);
ctx.stroke();
// ]]></script>

6. Stroke Text with canvas tag
With below code you can stroke any text into the rectangular canvas. This text is totally formed by pixels colors.

1
2
3
4
5
6
7
<canvas id="myCanvas" style="border: 1px solid pink;" width="350" height="100">
</canvas><script type="text/javascript">// <![CDATA[
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="25px Arial";
ctx.strokeText("Welcome to Pakistan",15, 60);
// ]]></script>

7. Draw Linear Gradient with Canvas tag

1
2
3
4
5
6
7
8
9
10
11
12
<canvas id="myfirstCanvas" style="border: 5px solid pink;" width="300" height="220">
</canvas><script type="text/javascript">// <![CDATA[
var c=document.getElementById("myfirstCanvas");
var ctx=c.getContext("2d");
// Create rectangular gradient
var grd=ctx.createLinearGradient(10,0,100,20);
grd.addColorStop(0,"brown");
grd.addColorStop(1,"pink");
// Fill the rectangular gradient
ctx.fillStyle=grd;
ctx.fillRect(0,10,160,90);
// ]]></script>

This static 2d graphics designing with canvas tag but believe you can do much more with just canvas tag. You I leave the rest on canvas for future tutorials. Try to search more on canvas on google there is bulk of material available online on making applications with canvas tag. I hope you have enjoyed this tutorial which is titled as html5 tutorial from scratch. In the next part I would try to uncover other exciting features of html5 like html5 APIs and HTML5 media.

Leave a Reply

Your email address will not be published. Required fields are marked *


× 9 = eighty one

CommentLuv badge