HTML5 Tag Reference Part 2

HTML5 Tag Reference Part 2

This article is for beginner to start work on HTML5 Canvas tag, Simple steps to learn how canvas works?
So throw your fear out of using canvas and start it using today!

What is Canvas?

Canvas is a element of HTML5 which uses JavaScript to draw graphics on a web page. A canvas is a rectangular area. Each and every pixel of it can be controlled by us. There are several methods for drawing paths, boxes, circles, characters, and adding images by using canvas.

How to write it?

To add canvas tag to our HTML document we need id, width and height. Below is the example how to write a basic canvas tag to your HTML document.

<canvas id="myFirstCanvas" width="100" height="100"></canvas>

How canvas work with Javascript?

Canvas element can not draw anything, the drawing is done in Javascript only. The Javascript use the id to reach the particular canvas. The below is the small example which shows how Javascript work with canvas.

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myFirstCanvas" width="100" height="100" style="border:2px solid #000000;">

</canvas>

<script type="text/javascript">

var c=document.getElementById("myFirstCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FFF000";
cxt.fillRect(0,0,100,125);

</script>

The fillStyle method makes it yellow, and the fillRect method specifies the shape, position, and size.

Coordinates – X and Y

The fillRect method above had the parameters (0,0,100,125). This means: Draw a 100×125 rectangle on the canvas, starting at the top left corner (0,0). The canvas’ X and Y coordinates decide the position of drawings on the canvas.

Good Examples of canvas to start learning

Example 1:

HTML5 Circle Canvas

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myFirstCanvas" width="200" height="100" style="border:1px solid #999999;">
</canvas>

<script type="text/javascript">

var c=document.getElementById("myFirstCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#000000";
cxt.beginPath();
cxt.arc(50,18,18,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

</body>
</html>

Example 2:
HTML5 Gradient Canvas

<html>
<body>

<canvas id="myFirstCanvas" width="300" height="150" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myFirstCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#FFF000");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,100);

</script>

</body>
</html>

Exciting website using HTML5 canvas :

Canvas Example from js-fireworks appspot

Canvas Example from js-fireworks appspot

Addyosmani-Canvas Photo

Addyosmani-Canvas Photo

Canvas Animation Demo

Canvas Animation Demo

Paulhamill Interactive

Paulhamill Interactive Canvas

This is not enough to know about HTML5 canvas there are still so many things coming in our next post,
but really helpful to start your practice with it.

Tags Posted under Canvas, HTML5 by admin
  • http://giguz.com/tags-001 Willow Lusco

    Great Job bro.

  • http://giguz.com/tags-comments/Bookmark-your-websiteblog-to-50-popular-social-bookmarking-sites!-12.html Stasia Tapp

    Great Job bro.

    • http://www.yahoo.com/ Kevrel

      Cheers pal. I do appreciate the wirting.

    • http://www.google.com/ Tory

      Thanks for writing such an easy-to-udnearstnd article on this topic.

  • http://termpaper-blog.com/masterpapers-review masterpapers

    Great job, you’ve helped me so much and I am so glad I have chosen your service.

  • http://www.yahoo.com/ Wednesday

    A good many vaalubles you’ve given me.