This article will show how to use canvas element in HTML
Power of canvas tag in HTML5
In this article we are going to
see how to implement canvas in HTML5 using canvas tag. If you don’t have idea
of HTML5 or have little one this article is for you. HTML5 is enhanced version
of HTML and it reduces dependency on third party plugin in web application.
In early days it was challenging task
to display video or music file in web application. Developers were totally
dependent on user’s browser configuration and third party plugin like flash.
But, with the introduction of HTML5, the
dependency has reduced very much. HTML5 has it’s own power to display video or
play music file.
Beside those facilities , it also
allowing user to drag object in web page by writing code by using canvas
element. In this article we will see how to use canvas element in HTML5.
At first we see how to draw
simple rectangle in user interface using canvas tag.
Define
canvas tag
<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="ASP.NET.WebForm6"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
</head>
<body>
<form id="form1" runat="server">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</form>
</body>
</html>
This code will create one
rectangle area(canvas) in web page . If your browser does not support canvas then the message “Your
browser does not support the HTML5 canvas tag.” will be displayed and please
update your browser to test further example.
Fill rectangle
Now we will go into little deeper . We will create
one canvas and will fill some portion of canvas with color. Please check code below.
<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="ASP.NET.WebForm6"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
</head>
<body>
<form id="form1" runat="server">
<canvas id="myCanvas" width="200" height="100" style="border:5px solid #ababab;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#ababab";
ctx.fillRect(0, 0, 150, 155);
</script>
</form>
</body>
</html>
Here you can see within HTML
portion canvas tag is defined JavaScript is used to beautify this
canvas. Within JavaScript function, object of Canvas tag is created using
fillStyle property.
ctx.fillStyle = "#ababab";
If you want to change color just
change Hex code value.
Write
text on rectangle
OK, so far we have created canvas tag and fill by
color, now we will see how to write stylish text on canvas tag. Have a look on
below example. Writing text procedure is very similar with fill color
procedure.
<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="ASP.NET.WebForm6"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
</head>
<body>
<form id="form1" runat="server">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("sourav kayal", 10, 50);
</script>
</form>
</body>
</html>
At first we have to create object
of canvas element and then we need to set those two properties
ctx.font = "30px Arial";
ctx.strokeText("sourav kayal", 10, 50);
First property will set font size
and face into object and in second I am calling strokeText() function by three
parameter , First one text to be write on canvas and second two are position to
be write.
Draw circle
Now we will see how to draw object
on canvas tag. We will draw circle now. In below I have given sample code for
that.
<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="ASP.NET.WebForm6"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
</head>
<body>
<form id="form1" runat="server">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the
HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
</form>
</body>
</html>
ctx.beginPath();
ctx.arc(100, 50, 40, 0, 2 * Math.PI);
Those two functions are heart of
drawing operation. First function will initiate paint on canvas object and
second function arc() will draw circle. It takes 5 parameters .
First two represents center position of
circle
Third radius of circle
Fourth -> 0 represent it’s
circle, you can put different value to dray various arc like oval ,ellipse etc.
Conclusion:
In this article, we have seen how
to use canvas tag in HTML5. Hope this help if you are new in HTML5