Resources » Internet & Browsers » HTML
Canvas element in HTML5 tutorial
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.
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.
|
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!
|
|
|
|