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:
image 1.jpg
image 2.jpg
Step 2:
image 3.jpg
Step 3:
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