Post
Ask Question

HTML5 Canvas For Beginners : Part 4

Introduction

 
1ImageMain.png
 
Welcome back to my "HTML5 Canvas For Beginners" article series Part-IV. If you are new to HTML5 Canvas then I suggest you read my previous articles:
In today's article we learn all about HTML5 Canvas Images.
 

HTML5 Canvas Images

 
In HTML5 Canvas, we can draw an image using the "drawImage()" method in which we need an image object and a destination point. As we know, the drawImage() method needs an image object, so we need to create an image and wait until it loads on the canvas. We can do this using the "onload" property of the image object.
 
Example:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <canvas id="drawCanvas" width="600" height="500"></canvas>  
  5.         <script>  
  6.             var drawCanvas = document.getElementById('drawCanvas');  
  7.             var ctx = drawCanvas.getContext('2d');  
  8.    
  9.             //Declare an image object  
  10.             var imgObj = new Image();  
  11.    
  12.             imgObj.onload = function () {  
  13.                 ctx.drawImage(imgObj, 5, 80);  
  14.             };   
  15.             //Image source  
  16.             imgObj.src = 'images/disney1.jpg';  
  17.         </script>  
  18.     </div>  
  19.     </form>  
  20. </body> 
Output
 
22.PNG
 

Image Size

 
In HTML5 Canvas, we can set the size of an image by adding two more parameters in the "drawImage()" method, "width" and "height".
 
Example:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.        <canvas id="drawCanvas" width="600" height="500"></canvas>  
  5.        <script>  
  6.             var drawCanvas = document.getElementById('drawCanvas');  
  7.             var ctx = drawCanvas.getContext('2d');  
  8.             var x = 100;  
  9.             var y = 120;  
  10.             var w = 400;  
  11.             var h = 300;  
  12.    
  13.             var imgObj1 = new Image();  
  14.             imgObj1.onload = function ()  
  15.             {  
  16.                 ctx.drawImage(imgObj1, x, y, w, h);  
  17.             }  
  18.             imgObj1.src = 'images/Captain.jpg';  
  19.    
  20.             var imgObj2 = new Image();  
  21.             imgObj2.onload = function () {  
  22.                 ctx.drawImage(imgObj2, 0, 0, 600, 100);  
  23.             }  
  24.             imgObj2.src = 'images/image.jpg';  
  25.         </script>  
  26.     </div>  
  27.     </form>  
  28. </body> 
Output
 
33.PNG
 

Image - Crop

 
In HTML5 Canvas, we can crop an image by adding six more parameters to the drawImage() method which are as follows :
  • sourceX
  • sourceY
  • sourceWidth
  • sourceHeight
  • destWidth
  • destHeight
The parameters define the size and the location of the area that we need to cut out from an image.
 
Example:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <canvas id="drawCanvas" width="600" height="500"></canvas>  
  5.         <script>  
  6.             var drawCanvas = document.getElementById('drawCanvas');  
  7.             var ctx = drawCanvas.getContext('2d');  
  8.    
  9.             var imgObj = new Image();  
  10.             imgObj.onload = function ()  
  11.             {  
  12.                 var srcX = 150;  
  13.                 var srcY = 0;  
  14.                 var srcW = 300;  
  15.                 var srcH = 300;  
  16.                 var destW = srcW;  
  17.                 var destH = srcH;  
  18.                 var destX = drawCanvas.width / 2 - destW / 2;  
  19.                 var destY = drawCanvas.height / 2 - destH / 2;  
  20.                 ctx.drawImage(imgObj, srcX, srcY, srcW, srcH, destX, destY, destW, destH);  
  21.             };  
  22.             imgObj.src = 'images/Captain.jpg';  
  23.         </script>  
  24.     </div>  
  25.     </form>  
  26. </body> 
Output
 
44.PNG
 

Pattern

 
In HTML5 Canvas, the "createPattern()" method is creates various patterns. It returns a pattern object and sets the "fillStyle" property to the pattern object, and then the "fill()" method is used to fill the shape. This method requires a repeat parameter and also an image; repeat can be "repeat", "repeat-x", "repeat-y" or "no-repeat". By default it is set to "repeat".
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.              <canvas id="drawCanvas" width="600" height="500"></canvas>   
  5.             <script>  
  6.                 var drawCanvas = document.getElementById('drawCanvas');  
  7.                 var ctx = drawCanvas.getContext('2d');  
  8.    
  9.                 var imgObj = new Image();  
  10.                 imgObj.onload = function ()  
  11.                 {  
  12.                     var pattern = ctx.createPattern(imgObj, 'repeat');  
  13.                     ctx.rect(0, 0, drawCanvas.width, drawCanvas.height);  
  14.                     ctx.fillStyle = pattern;  
  15.                     ctx.fill();  
  16.                 };  
  17.                 imgObj.src = 'image.jpg';  
  18.             </script>  
  19.         </div>  
  20.     </form>  
  21. </body> 
Output
 
55.PNG


Similar Articles