Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

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

×

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

Exploring the HTML5 Canvas Element with Examples

In this article you will see some things about HTML5 Canvas, an HTML element which can be used to draw graphics on the web page via scripting language.

Introduction:

This article will explain the basic terminology and working on canvas using HTML 5. The canvas is an HTML element which can be used to draw graphics on the web page via scripting language. Mainly we will use Java script as scripting language.

Description:

  • The element is only a container for graphics; we must use a script to actually draw the graphics.
  • Basically a canvas is a drawable region defined in HTML code with height and width attributes.
  • Canvas uses several methods for drawing custom Shapes (Circle, Semicircle, Rectangle, and Square) characters, and adding images.
  • First of all we’ll need to place the canvas tag somewhere inside our HTML, create an initializer JavaScript function that accesses the canvas tag once the page loads, and then utilize the HTML5 Canvas API to draw your visualizations.
  • The IE9, Chrome, Mozilla Firefox, Opera and Safari support the tag.

Creating Canvas

A canvas is starts with the element. It contains the id, width, and height of the element.

Example-

  • Canvas width-Width of region
  • Canvas Height -Length of region

Note- The element has no drawing abilities of its own. All drawing must be done inside a JavaScript.

Drawing Shapes - Here, we need to understand about the canvas coordinate space. Generally 1 unit in the space corresponds to 1 pixel on the canvas. The origin of this space is positioned in the center (coordinate (0,0)). All elements are placed relative to this origin.

Drawing Rectangle - we have to use the rect() method. An HTML5 Canvas rectangle is positioned by the x and y parameters, and is sized with the width and height parameters. Sample will be like this:

<script>
context.rect(x, y, width, height);
</script>

Listing 1:Script for creating Rectangle using HTML 5

<!DOCTYPE html>
<html>
<body>
<canvas id="UgCanvas" width="300" height="200" style="border:1px solid #c6c6c6;">
</canvas>
<script type="text/javascript">
var c=document.getElementById("UgCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#7F7F00";
ctx.fillRect(0,0,150,100);
</script>
</body>
</html>
Output Rectangle drawing using HTML 5 canvas

Figure 1: Output Rectangle drawing using HTML 5 canvas

Circle Drawing -, we can create an arc using the arc() method and define the starting angle as 0 and the ending angle as 2 * PI(22/7).Sample will be like this:

<script>
  context.arc(x, y, radius, 0 , 2 * Math.PI, false);
</script>

Listing 2: Script for creating Circle using HTML 5

<!DOCTYPE html>
<html>
<body>
<canvas id="UgCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">
</canvas>
<script type="text/javascript">
var c=document.getElementById("UgCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#7F7F00";
ctx.beginPath();
ctx.arc(90,50,50,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
</script>
</body>
</html>
Output of circle drawing using HTML 5 Canvas

Figure 2: Output of circle drawing using HTML 5 Canvas.

Path(Line) Drawing -To create a Path using HTML5 Canvas, we can use the beginPath(), moveTo(), lineTo(), and stroke() methods.Sample will be like this:

<script>
context.beginPath();
context.moveTo(x,y);
context.lineTo(x,y);
context.stroke();
</script>

Listing 3: Script for creating Path(Lining) using HTML 5

<!DOCTYPE html>
<html>
<body>
<canvas id="UgCanvas" width="300" height="200" style="border:1px solid #c6c6c6;">
</canvas>
<script type="text/javascript">
var c=document.getElementById("UgCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(150,50);
ctx.lineTo(50,160);
ctx.stroke();
</script>
</body>
</html>
Output of pathline using HTML 5 Canvas

Figure 3: Output of pathline using HTML 5 Canvas

Drawing text - (HTML5 Canvas Text Font, Size, and Style)

Here, we have to use the font property of the canvas context. The style can be normal, italic, or bold.by default font size is normal. Sample will be like this:

<script>
context.font = 'italic 40px Calibri';
</script>

Listing 4: Script for creating Path(Lining) using HTML 5

<!DOCTYPE HTML>
<html>
  <head>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("UgCanvas");
        var context = canvas.getContext("2d");

        context.font = "italic 40pt arial";
        context.fillText("Canvas Tutorial.", 10, 100);
      };

    </script>
  </head>
  <body>
    <canvas id="UgCanvas" width="400" height="200" style="border:1px solid #c6c6c6;"></canvas>
  </body>
</html> 
Output of path line using HTML 5 Canvas

Figure 4: Output of path line using HTML 5 Canvas

Conclusion

These examples are the basic implementation of canvas using HTML 5. On large scale you can do more additional things like Drawing Custom Shapes , Image coloring ,Text coloring, Image cropping,Text Wrapping,Text metrics, Patterning, Line coloring, line joining .

As usual, please comment if you have any questions regarding this tutorial.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[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