Power of canvas tag in HTML5

Sourav.Kayal
Posted by in HTML 5 category on for Beginner level | Points: 250 | Views : 7813 red flag

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

  

 

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Posted by: Longwest on: 3/8/2015 | Points: 25
Thanks for your tutorial, especially the code give me good examples.

Best regards.
http://www.keepdynamic.com/

Login to post response

Comment using Facebook(Author doesn't get notification)