0
0
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>
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>
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:
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:
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>
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>
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:
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>
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>
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>
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>
Figure 8: Shows the output of listing 9
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!
See the prices for this post in Mr.Bool Credits System below: