Introduction

In this article, we will learn how to create an image frame gallery in an HTML5 canvas. Canvas is an important tag used to display images or text in an HTML5 application. We know that HTML5 is an advanced version of an HTML that is used to develop multimedia and animated applications. This article is intended to help with the use of HTML5 tools to create image frame gallery applications. We developed this application with the help of CSS; CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. JavaScript was designed to add interactivity to HTML pages. JavaScript is usually embedded directly into HTML pages. I hope this article helps to create an image frame gallery on canvas using HTML 5 and JavaScript tools.
Step 1: Open Visual Studio.
new.gif
application.gif
Step 2: Add an HTML file to your web application.
css.gif
html.gif
Step 3: In this step, we add a folder named "image" that is used to store all images. The images are used to display on canvas.
folder.gif
image foledr.gif
imagesssssssssssss.gif
Step 4: In this section, we will create a function named "Display" that is used to provide a canvas id and image path.
Code
  1. function Display()
  2. {
  3. var rxt = document.getElementById('canvas').getContext('2d');
  4. var IMG = new Image();
  5. IMG.src = 'image/3333333333333333333.gif';
  6. IMG.onload = function ()
  7. {
  8. for (i = 0; i < 5; i++)
  9. {
  10. for (j = 0; j < 4; j++)
  11. {
  12. rxt.drawImage(IMG, j * 160, i * 250, 200, 200);
  13. }
  14. }
  15. }
  16. }
Step 5: In this section, we set a CSS used for the background, font and margin of a canvas body.
Code
  1. body
  2. {
  3. margin: 20px;
  4. font-family: arial,verdana;
  5. background: Gray;
  6. }
  7. h1
  8. {
  9. font-size: 140%;
  10. font-weight: normal;
  11. color: Gray;
  12. }
  13. h2
  14. {
  15. font-size: 100%;
  16. color: Red;
  17. }
  18. canvas
  19. {
  20. border: 2px solid #66FF99;
  21. float: left;
  22. margin-right: 20px;
  23. }
Step 6: In this section, we will set a body content of an image frame gallery application.
Code
  1. <body onload="Display();" background="image/222222222222222222.gif">
  2. <h1 style="background-color: #FF99FF">
  3. Display a image frame on HTML5</h1>
  4. <div style="background-color: #CCCCFF">
  5. <canvas id="canvas" width="700" height="700"></canvas>
  6. <div style="float: left; background: #66FF99">
  7. <h2>
  8. Original image</h2>
  9. <img src="image/3333333333333333333.gif" style="background-color: #FFCCFF" />
  10. </div>
  11. </div>
  12. </body>
body.gif
Step 7: In this section is the complete demo code of an image frame gallery application.
Code
  1. <html>
  2. <head>
  3. <title>Tom application</title>
  4. <script type="text/javascript">
  5. function Display()
  6. {
  7. var rxt = document.getElementById('canvas').getContext('2d');
  8. var IMG = new Image();
  9. IMG.src = 'image/3333333333333333333.gif';
  10. IMG.onload = function ()
  11. {
  12. for (i = 0; i < 5; i++)
  13. {
  14. for (j = 0; j < 4; j++)
  15. {
  16. rxt.drawImage(IMG, j * 160, i * 250, 200, 200);
  17. }
  18. }
  19. }
  20. }
  21. body
  22. {
  23. margin: 20px;
  24. font-family: arial,verdana;
  25. background: Gray;
  26. }
  27. h1
  28. {
  29. font-size: 140%;
  30. font-weight: normal;
  31. color: Gray;
  32. }
  33. h2
  34. {
  35. font-size: 100%;
  36. color: Red;
  37. }
  38. canvas
  39. {
  40. border: 2px solid #66FF99;
  41. float: left;
  42. margin-right: 20px;
  43. }
  44. <body onload="Display();" background="image/222222222222222222.gif">
  45. <h1 style="background-color: #FF99FF">
  46. Display a image frame on HTML5</h1>
  47. <div style="background-color: #CCCCFF">
  48. <canvas id="canvas" width="700" height="700"></canvas>
  49. <div style="float: left; background: #66FF99">
  50. <h2>
  51. Original image</h2>
  52. <img src="image/3333333333333333333.gif" style="background-color: #FFCCFF" />
  53. </div>
  54. </div>
  55. </body>
  56. </html>
Step 8: Press Ctrl+F5 to run the application in a browser.
Output
out1.gif
out2.gif
out3.gif
Resources
Here are some useful resources: