What is HTML5 Canvas element
In this article I have described the Canvas element in HTML5
INTRODUCTION
The canvas element is part of HTML5, thus allowing for dynamically generated graphics. Some anticipated uses of canvas include building graphs, animations, games, and image composition. the canvas element and what kinds of things are required and expected in its associated code. This should help you get a firm fundamental understanding of canvas in preparation for creating something interesting and powerful with this unique HTML5 element. we're going to create a breakout clone that you can play in your browser, using java script and the <canvas> element.
Browser Support the HTML5 Canvas element
| Browser |
Support |
| Internet Explorer 9 |
Yes |
| Google Chrome |
Yes |
| Firefox |
Yes |
| Opera |
Yes |
| Safari |
Yes |
| Android Browser |
Yes |
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> </canvas>element.
Create a Canvas Example in HTML5
A canvas is specified with the <canvas></canvas> element.
|
<canvas id="myCanvas" width="200" height="100"></canvas>
|
JavaScript uses the id to find the <canvas> </canvas> element:
|
<!DOCTYPE html>
<html>
<body>
<canvas id="myCnv" width="150" height="150" style="border:5px solid #c3c3c3;">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCnv");
var ctx=c.getContext("2d");
ctx.fillStyle="#0ff000";
ctx.fillRect(0,0,120,100);
</script>
</body>
</html>
|
OUTPUT
|
<!DOCTYPE html>
<html>
<body>
<canvas id="myCvs" width="200" height="100" style="border:2 px solid #c3c3c3;">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCvs");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0F0000");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,200,100);
</script>
</body>
</html>
|
OUTPUT
Further Readings
You may also want to read these related articles :
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here