Post
Ask Question

Canvas Image in HTML5

Introduction

 
In this article, we will learn how to create an image in Canvas. We know that many elements can be created such as rectangles, circles, triangles, and diamond shapes by drawing paths, and with various shades using rgba. In this segment we see will how to draw images in the Canvas. To draw the images in The canvas using HTML5 we use the drawimage() function that allows us to create an image object within the canvas area. We specify the image object and destination point where we want to draw the image in HTML5 Canvas.
 
Here are the steps:
 
Step 1:
  • Open the Visual Studio 2010.
  • File->>New->>Website
  • choose an Empty Website
image 1.jpg
 
image 2.jpg
 
Step 2:
  • Right-click on the Solution Explorer
  • Add->>add new item->>HTML form
  • Give the name.
image 3.jpg
 
Step 3:
  • Right-click on the Solution Explorer
  • Add Existing Item
  • Add the Images in the Solution Explorer.
image 4.jpg
 
Step 4: Write the code below in the .htm Page:
  1. <html>  
  2.   <head>  
  3.     <style>  
  4.       body {  
  5.         margin: 0px;  
  6.         padding: 0px;  
  7.       }  
  8.      Canvas {  
  9.         border: 10px solid #9Cff98;  
  10.       }  
  11.     </style>  
  12.     <script>  
  13.         window.onload = function () {  
  14.             var canvas = document.getElementById("myCanvas");  
  15.             var context = canvas.getContext("2d");  
  16.             var canvas2 = document.getElementById("my2anvas");  
  17.             var context2 = my2anvas.getContext("2d");  
  18.             var imageObj = new Image();  
  19.             var neximg = new Image();  
  20.             imageObj.onload = function () {  
  21.                 context.drawImage(imageObj, 100 , 80);  
  22.             };  
  23.             neximg.onload = function () {  
  24.                 context2.drawImage(neximg, 100, 80);  
  25.             };  
  26.             imageObj.src = "images.jpg";  
  27.            neximg.src = "images (1).jpg";  
  28.         };  
  29.     </script>  
  30.   </head>  
  31.   <body>  
  32.     <canvas id="myCanvas" width="450" height="350"></canvas>  
  33.     </br>  
  34.     <canvas id="my2anvas" width="450" height="350"></canvas>  
  35.   </body>  
  36. </html> 
Step 5: Press F5 and see the Output:
 
Output
image 6.jpg


Similar Articles