HTML5 Canvas - Create great graphics


The HTML 5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.Canvas has several methods for drawing paths, boxes, circles, text, and adding images.


Browser support :

Determining which browsers support HTML 5 and to what extent is a moving target. At the time this article was written, Google Chrome, Apple Safari, and Mozilla Firefox all support most of the new HTML5 elements, and all support the canvas element. Internet Explorer does not support HTML5 in Internet Explorer 7 or 8; Internet Explorer 9 is in beta testing and supports HTML5, though with some problems.A popular workaround is to include an entire canvas-based JavaScript library that is supplied by Google called the ExplorerCanvas—or  excanvas., for short. Download and reference it as an external file, as shown below. (See Resources for links to more extensive information about excanvas.)


<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<

![endif]-->

Basic Canvas Example : code download
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]><script type="text/javascript" src="excanvas.js">
</script> <![endif]-->
</head><body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="200" height="200" 
style="background-color:yellow;border: 5px green solid"></canvas>
</div>
</body></html>
Canvas with javascript : code download
<!DOCTYPE html>
<html><body>
<canvas id="myCanvas" width="150" height="100"
style="border:1px solid #ccc;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(20,50,100,10);
</script>
</body>
</html>
Canvas Text : code download
<!DOCTYPE html>
<html><body>
<canvas id="myCanvas" width="200" height="100" 
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="18px Arial";
ctx.strokeText("Crazy Web Developers",10,50);
</script>
</body>
</html>
Canvas - Gradients : code download

<!DOCTYPE html>
<html><body>
<canvas id="myCanvas" width="150" height="100"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(35,50,5,50,60,100);
grd.addColorStop(0,"green");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script></body></html>
Canvas - Linear Gradients : code download
<!DOCTYPE html>
<html><head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
  window.onload=function() {
  var mycanvas=document.getElementById("myCanvasTag");
  var mycontext=mycanvas.getContext('2d');
  var mygradient=mycontext.createLinearGradient(30,30,300,300);           
  mygradient.addColorStop(0,"#FF0000");
  mygradient.addColorStop(1,"#00FF00");
  mycontext.fillStyle=mygradient;
  mycontext.fillRect(0,0,200,200);
  }
</script></head><body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="200" height="200" 
style="border: 8px yellow solid">
</canvas></div></body>
</html>

Canvas - Radial Gradients : code download
<!DOCTYPE html>
<html><head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
  window.onload=function() {
  var mycanvas=document.getElementById("myCanvasTag");
  var mycontext=mycanvas.getContext('2d');
  var mygradient=mycontext.createRadialGradient(300,300,0,300,300,300);           
  mygradient.addColorStop("0","magenta");
  mygradient.addColorStop(".25","blue");
  mygradient.addColorStop(".50","green");
  mygradient.addColorStop(".75","yellow");
  mygradient.addColorStop("1.0","red");                
  mycontext.fillStyle=mygradient;
  mycontext.fillRect(0,0,200,200);
  }
</script></head><body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="200" height="200" 
style="border: 6px blue solid">
</canvas></div></body></html>



Previous
Next Post »