Resources » Internet & Web » HTML

Canvas element in HTML5 tutorial


Posted Date: 04-Feb-2012  Last Updated:   Category: HTML    
Author: Member Level: Gold    Points: 30


Here in this article I will be explaining you, one of the most important feature of HTML5, Canvas. Canvas element is the basic element for drawing any drawing or creating a game using HTML5. So, learn this canvas element of HTML5 in just 5 minutes.

This HTML5 Tutorial explains another important feature of HTML5 that is canvas. <Canvas> tag is used to draw canvas elements. Canvas is nothing but a frame of size you specify and under this canvas whatever you draw is your creativity. This drawing part is done by the JavaScript and canvas element holds the canvas's drawing intact.

In this particular tutorial of HTML5 Canvas element, I have explained only the rectangle part of canvas elements, that is you will learn drawing rectangle using HTML5's canvas element.

So, for this let's take the rectangle patterns of our national flag India. Here I have modified the true colors, instead of saffron has taken Red color.


<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas"width="125" height="150">Your browser does not support the canvas
tag.</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw Red rectangle
ctx.fillStyle = 'Red';
ctx.fillRect(0, 0, 125, 50);
//Draw white pattern
ctx.moveTo(0,50);
ctx.fillStyle='white';
ctx.fillRect(0,50,125,100);
//draw green pattern
ctx.moveTo(0,100);
ctx.fillStyle='Green';
ctx.fillRect(0,100,125,150);

</script>
</body>
</html>


The code may not work on the server or on your browsers which don't support HTML5, so I'm placing the image of that pattern which will come out of this code.

canvas in html5

Here is the code for the same three patterns, test this in your own browser .

<html>
<body>
<canvas id="myCanvas"width="125" height="150">Your browser does not support the canvas
tag.</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw Red rectangle
ctx.fillStyle = 'Red';
ctx.fillRect(0, 0, 125, 50);
//Draw white pattern
ctx.moveTo(0,50);
ctx.fillStyle='white';
ctx.fillRect(0,50,125,100);
//draw green pattern
ctx.moveTo(0,100);
ctx.fillStyle='Green';
ctx.fillRect(0,100,125,150);

</script>
</body>
</html>


In the upcoming HTML 5 tutorials, I will be explaining some more features of HTML5. Stay tuned for more of my HTML 5 samples.
Related Resources:


Read related articles: HTML 5 Samples    HTML 5 Tutorials    Html 5    

Did you like this resource? Share it with your friends and show your love!




Responses to "Canvas element in HTML5 tutorial"
Feedbacks      

Post Comment:




  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:   Sign In to fill automatically.
    Email: (Will not be published, but required to validate comment)



    Type the numbers and letters shown on the left.


    Submit Article     Return to Article Index

    Online Members

    Muhammed Aneez
    More...
    Awards & Gifts
    Active Members
    TodayLast 7 Daysmore...

    Talk to Webmaster Tony John