What is HTML5 Canvas element

In this article I have described the Canvas element in HTML5
  • 1979

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

 canvas.gif
 

<!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

canvas2.gif
 
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

© 2019 DotNetHeaven. All rights reserved.