MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with HTML5 Canvas

In this article, we will briefly discuss the HTML5 canvas and the process of creating it. After creating it, we will discuss the different aspects in which the canvas can be modified.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Let us begin with the definition of canvas. The <canvas> element in HTML5 is used to draw graphics, multicolor texts and many more on a web page. The <canvas> element is usually considered as an ampoule for graphics. During the process of creating the graphics, a script must be used. Most of the times and even for the simplicity JavaScript is used as it is easy and simple to understand for the beginners. Canvas has several methods for drawing paths, boxes, circles, characters, and adding images. Using canvas we can draw paths, boxes, circles, characters using different methods.

Note: The HTML5 canvas element is not supported by the older versions of web browsers. Only Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support this feature.

Now, let us begin the process by creating a canvas. By default, the canvas is a rectangular area on an HTML page, which can be specified using the <canvas> element. For the knowledge of the users, the default <canvas> element does not include border and content in it.

Listing 1: Shows the markup for <canvas> element

<canvas id="htmlCanvas" width="100" height="200"></canvas>

The default canvas is a two dimensional grid. The upper-left corner of the canvas has coordinate (0,0). The width and height attributed define the size of the canvas that is created. The ID attribute i.e., “htmlCanvas” is referred in a script. The concept of multiple canvases can also be used on a single web page. In short, it is nothing but creating one or more canvas on a single web page. In order to add the border to the element, the following is needed.

Listing 2: Shows the code for adding border to the default <canvas> element

<!DOCTYPE html>
<html>
<head>
	<title>HTML5 Canvas - MrBool Tutorial</title>
</head>
<body>

<canvas id="htmlCanvas" width="100" height="200" style="border:2px solid blue;">
 HTML5 canvas tag are not supported by your browser.
</canvas>

</body>
</html>
Shows the output of Listing 2

Figure 1: Shows the output of Listing 2

After adding a border to the <canvas> element, we will get a boundary in which we can draw something else. In technical terms, it is knows as drawing onto the canvas. For this, JavaScript is used. The following code is used for drawing onto the canvas.

Listing 3: Shows the code for drawing onto the canvas

<!DOCTYPE html>
<html>
<head>
	<title>HTML5 Canvas - MrBool Tutorial</title>
</head>
<body>

<canvas id="htmlCanvas" width="100" height="200" style="border:2px solid blue;">
 HTML5 canvas tag are not supported by your browser..
</canvas>

<script>

var c=document.getElementById("htmlCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="cyan";
ctx.fillRect(0,0,120,85);

</script>

</body>
</html>
Shows the output of Listing 3

Figure 2: Shows the output of Listing 3

In the code for listing 2, there are certain things that must be thoroughly understood by the user. It is given step by step:

  • “var c=document.getElementById("htmlCanvas");”: This line will help the user to find the canvas element.
  • “var ctx=c.getContext("2d");”: This line will help the user to call its getContext() method.
  • “ctx.fillcyan"; & ctx.fillRect(0,0,120,85);” : These two lines will help the user to draw onto the canvas under the given constraints.

Now, we will discuss the concept of Canvas paths. This is used to draw straight lines on the canvas. In order to do this, two different methods are used. They are as follows:

  • moveTo(x,y) defines the starting point of the line.
  • lineTo(x,y) defines the ending point of the line.

Listing 4: Shows the code for drawing a straight line on a canvas

<!DOCTYPE html>
<html>
<head>
	<title>HTML5 Canvas - MrBool Tutorial</title>
</head>
<body>

<canvas id="htmlCanvas" width="100" height="200" style="border:2px solid blue;">
 HTML5 canvas tag are not supported by your browser.</canvas>

<script>

var c=document.getElementById("htmlCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

</script>

</body>
</html>
Shows the output of Listing 4 i.e., a straight line

Figure 3: Shows the output of Listing 4 i.e., a straight line

After drawing the straight line, the next thing is to draw the circle on the canvas. For this the following method is used: “arc(x,y,r,start,stop)”.

Listing 5: Shows the code to draw a circle on the canvas

<!DOCTYPE html>
<html>
<head>
	<title>HTML5 Canvas - MrBool Tutorial</title>
</head>
<body>

<canvas id="htmlCanvas" width="100" height="200" style="border:2px solid blue;">
HTML5 canvas tag are not supported by your browser.</canvas>

<script>

var c=document.getElementById("htmlCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(85,60,50,0,2*Math.PI);
ctx.stroke();

</script> 

</body>
</html>
Shows the output of the listing 5 i.e., a circle

Figure 4: Shows the output of the listing 5 i.e., a circle

The next thing that we will be discussing is to write on to the default canvas. It is known as Canvas text. For this, three important properties are used i.e., font, fillText and strokeText. They perform the following function:

  • The font defines the font of the text that is to be written onto the canvas.
  • The fillText property draws a filled text on the canvas. For this (x,y) coordinates are provided.
  • The strokeText property draws text on the canvas that is not filled. For this (x,y) coordinates are provided.

Now, for the better understanding of the users, we will use both the properties to write text on the canvas. Let us start with the fillText property.

Listing 6: Shows the code for writing texts on canvas using fillText property

<!DOCTYPE html>
<html>
<head>
	<title>HTML5 Canvas - MrBool Tutorial</title>
</head>
<body>

<canvas id="htmlCanvas" width="100" height="200" style="border:2px solid blue;">
HTML5 canvas tag are not supported by your browser..</canvas>

<script>

var c=document.getElementById("htmlCanvas");
var ctx=c.getContext("2d");
ctx.font="20px comic sans MS";
ctx.fillText("mrbool",10,20);

</script>

</body>
</html>
Shows the output of listing 6 i.e., text on canvas using fillText property

Figure 5: Shows the output of listing 6 i.e., text on canvas using fillText property

Now, let us write the text on canvas using strokeText property. The code is almost same as for the fillText property.

Listing 7: Shows the code to write on the canvas using strokeText property

<!DOCTYPE html>
<html>
<head>
	<title>HTML5 Canvas - MrBool Tutorial</title>
</head>
<body>

<canvas id="htmlCanvas" width="100" height="200" style="border:2px solid blue;">
HTML5 canvas tag are not supported by your browser..</canvas>

<script>

var c=document.getElementById("htmlCanvas");
var ctx=c.getContext("2d");
ctx.font="20px comic sans MS";
ctx.strokeText("mrbool",10,20);

</script>

</body>
</html>
Shows the output of listing 7 i.e., text on canvas using strokeText property
Figure 6: Shows the output of listing 7 i.e., text on canvas using strokeText property

Last but not the least, the most important and the widely used characteristic of HTML5 canvas is Canvas – Gradients. Gradients are used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors. This feature helps the users to provide shaded colour. This feature can be used in two ways. They are follows:

The first feature is to create a linear gradient. For this “createLinearGradient(x,y,x1,y1)” tag is used. Here, x,y,x1,y1 defines the coordinates within which the gradient is used.

The second feature is to create a radial or circular gradient. For this “createRadialGradient(x,y,r,x1,y1,r1)” tag is used. Here, x,y,r,x1,y1,r1 defines the coordinates within which the gradient is used.

Now, let us use the linear gradient first. The code is as follows:

Listing 8: Shows the code for using linear gradient property

<!DOCTYPE html>
<html>
<head>
	<title>HTML5 Canvas - MrBool Tutorial</title>
</head>
<body>

<canvas id="htmlCanvas" width="100" height="200" style="border:2px solid blue;">
HTML5 canvas tag are not supported by your browser..</canvas>

<script>

var c=document.getElementById("htmlCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"pink");
grd.addColorStop(1,"purple");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,70);

</script>

</body>
</html>
Shows the output of listing 7

Figure 7: Shows the output of listing 7

Now, we will use the radial or circular gradient property. The code for using this property is as follows.

Listing 9: Shows the code to use radial gradient property

<!DOCTYPE html>
<html>
<head>
	<title>HTML5 Canvas - MrBool Tutorial</title>
</head>
<body>

<canvas id="htmlCanvas" width="100" height="200" style="border:2px solid blue;">
HTML5 canvas tag are not supported by your browser..</canvas>

<script>

var c=document.getElementById("htmlCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"pink");
grd.addColorStop(1,"purple");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,70);

</script>

</body>
</html>
Shows the output of listing 9

Figure 8: Shows the output of listing 9

Conclusion

In brief, we have learnt about the basic of HTML5 canvas and its various properties such as creating a line, circle and how to write on the canvas and also giving color gradient. We can also use two properties together i.e., writing text on a gradient background and many more.

See you next time!



I am well versed with Computer Programming languages and possess good working knowledge on software languages such as C, Java, PHP, HTML and CSS

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login