Post
Ask Question

Html5 Canvas Tut (Image)

Overview

 
In this blog, I am showing how you can easily provide animation in the images using an HTML5 canvas tag.
 
You only have to call canvas element in your snippet using this tag:
 
<canvas id="myCanvas"> </canvas>
 
Code
  1. <html>  
  2.     <head>  
  3.         <title>Canvas | Image</title>  
  4.         <style>  
  5.         {  
  6.             margin: 0px;  
  7.             padding: 0px;  
  8.         }  
  9.     </style>  
  10.     </head>  
  11.     <body>  
  12.         <canvas id="myCanavs" width="320px" height="280px"></canvas>  
  13.         <script>  
  14.         var canvas = document.getElementById('mycanvas');  
  15.        var context = canvas = canvas.getContext('2d');  
  16.         var imageobj = new Image();  
  17.         imageobj.onload = function () {  
  18.             context.drawimage(imageobj, 69, 50);  
  19.         };  
  20.         imageobj.source = "12.jpg";  
  21.     </script>  
  22.     </body>  
  23. </html>  
Next Recommended Reading CANVAS in HTML5 (Best Drawing Surface)