Cross-Browser HTML5 Canvas

Canvas is a relatively new HTML5 technology that provides a "scriptable" image. You can add a <canvas> element to your page and draw on its surface using JavaScript commands.
The HTML5 Canvas element is an HTML tag similar to the <div>, <a>, or <table> tag, with the exception that its contents are rendered with JavaScript.
A "canvas" tag can be placed on an HTML5 page with the following code:
  1. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
  2. Your browser does not support the HTML5 canvas tag.
  3. </canvas>
Assuming that the canvas tag is supported, JavaScript can be used to draw directly onto the canvas.
First, we will find the "<canvas>" element:
var c=document.getElementById("myCanvas");
Then, call its "getContext()" method (you must the string "2d" to the "getContext()" method):
var ctx=c.getContext("2d");
The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, etc.
ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);
The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is #000000 (black).
The fillRect(x,y,width,height) method draws a rectangle filled with the current fill style.
Step 1:
Beginning with the code, our HTML5 head contains a small script that declares a canvas element.
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Canvas Example</title>
  6. <script>
  7. document.createElement("canvas");
  8. </script>
Step 2:

We can now define CSS styles for our canvas tag.
  1. <style>
  2. #mycanvas {
  3. float: left;
  4. width: 300px;
  5. height: 300px;
  6. margin: 0 20px 0 0;
  7. background-image: url(rain.jpg);
  8. border: 1px solid #000;
  9. }
  11. #mycanvas.active {
  12. background-image: none;
  13. }
  14. </style>
Step 3:
We can now place a canvas tag on the page.
  1. </head>
  2. <body>
  3. <h1>HTML Canvas Example with Image Fall Back</h1>
  4. <canvas id="mycanvas" width="300" height="300"></canvas>
Step 4:
The first few lines check whether canvas is supported, and applies a class of "active" to the element to remove the static background:
  1. var canvas = document.getElementById("mycanvas");
  2. if (canvas.getContext) {
  3. // canvas supported
  4. canvas.className = "active";
Step 5:
The following will start the animation:
  1. // start animation
  2. var cxt = canvas.getContext("2d");
  3. cxt.fillStyle = "rgba(255,255,255,0.5)";
  4. setInterval(function() {
  5. var x = Math.round(Math.random()*canvas.width),
  6. y = Math.round(Math.random()*canvas.height),
  7. e = 20 + Math.round(Math.random()*30),
  8. s = 0;
  9. (function() {
  10. s++;
  11. if (s <= e) {
  12. setTimeout(arguments.callee,s);
  13. var c = 255-(e-s)*3;
  14. cxt.strokeStyle = "rgb("+c+","+c+","+c+")";
  15. cxt.beginPath();
  16. cxt.arc(x,y,s,0,Math.PI*2,true);
  17. cxt.fill();
  18. cxt.stroke();
  19. }
  20. })();
  21. },100);
  22. }
Example:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Canvas Example</title>
  6. <script>
  7. document.createElement("canvas");
  8. </script>
  9. <style>
  10. body {
  11. font-family: sans-serif;
  12. margin: 20px;
  13. color: #333;
  14. background-color: #fff;
  15. }
  17. #mycanvas {
  18. float: left;
  19. width: 300px;
  20. height: 300px;
  21. margin: 0 20px 0 0;
  22. background-image: url(rain.jpg);
  23. border: 1px solid #000;
  24. }
  26. #mycanvas.active {
  27. background-image: none;
  28. }
  29. </style>
  30. </head>
  31. <body>
  33. <h1>HTML Canvas Example</h1>
  34. <canvas id="mycanvas" width="300" height="300"></canvas>
  35. <p>This page works in any browser.</p>
  37. <script>
  38. var canvas = document.getElementById("mycanvas");
  39. if (canvas.getContext) {
  41. // canvas supported
  42. canvas.className = "active";
  44. // start animation
  45. var cxt = canvas.getContext("2d");
  46. cxt.fillStyle = "rgba(255,255,255,0.5)";
  48. setInterval(function () {
  49. var x = Math.round(Math.random() * canvas.width),
  50. y = Math.round(Math.random() * canvas.height),
  51. e = 20 + Math.round(Math.random() * 30),
  52. s = 0;
  54. (function () {
  55. s++;
  56. if (s <= e) {
  57. setTimeout(arguments.callee, s);
  58. var c = 255 - (e - s) * 3;
  59. cxt.strokeStyle = "rgb(" + c + "," + c + "," + c + ")";
  60. cxt.beginPath();
  61. cxt.arc(x, y, s, 0, Math.PI * 2, true);
  62. cxt.fill();
  63. cxt.stroke();
  64. }
  65. })();
  66. }, 100);
  68. }
  69. </script>
  70. </body>
  71. </html>
Output
rain.jpg