Introduction

In this article, we will learn how to add texture to photos using HTML5 and JavaScript tools. We will begin with a small discussion of HTML. HTML is an acronym for "HyperText Markup Language" used to display data in a browser. HTML5 is an advanced version of HTML used to develop multimedia and animated applications. In a previous article, we used JavaScript. JavaScript was designed to add interactivity to HTML pages. JavaScript is usually embedded directly into HTML pages. I hope this article helps to show how to add texture to photos using HTML5 and JavaScript tools. If you are interested in adding texture to photos in your applications then go through the following steps.
Step 1: Open Visual Studio.
folder.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 the canvas and add texture.
folder.gif
image.gif
vvvvvvvvvvvvvvv.gif
Step 4: Now in this step we define a function named "Img" that is used to provide a canvas id and image path
Code
  1. function Img()
  2. {
  3. canvas = document.getElementById("myCanvas");
  4. if (canvas.getContext)
  5. {
  6. pxt = canvas.getContext("2d");
  7. MyImg.onload = function ()
  8. {
  9. pxt.drawImage(MyImg, 0, 0);
  10. ImgChange();
  11. }
  12. MyImg.src = "image/2.jpg";
  13. }
  14. }
Step 5: In this section, we create a function named "ImgChange" that is used to set a texture and texture color on an image.
Code
  1. function ImgChange()
  2. {
  3. for (i = 0; i <= 1000; i++)
  4. {
  5. var x = Math.floor(Math.random() * 500);
  6. var y = Math.floor(Math.random() * 500);
  7. pxt.fillStyle = "white";
  8. pxt.beginPath();
  9. pxt.arc(x, y, 3, 0, Math.PI * 2, true);
  10. pxt.closePath();
  11. pxt.fill();
  12. }
  13. }
Step 6: In this section, we set a body part of a texture application.
Code
  1. <body onload="Img()" bgcolor="#cc6699">
  2. <h1>
  3. Tom application
  4. </h1>
  5. <img id="myPhoto" src="image/2.jpg">
  6. <canvas id="myCanvas" width="386" height="255">
  7. </canvas>
  8. </body>
bodyyyyyyyyyyyyyyyyyyyyyy.gif
Step 7: In this section set a complete demo code of a texture photo application.
Code
  1. <html>
  2. <head>
  3. <title>Tom developed a </title>
  4. <script type="text/javascript">
  5. var MyImg = new Image();
  6. function Img()
  7. {
  8. canvas = document.getElementById("myCanvas");
  9. if (canvas.getContext)
  10. {
  11. pxt = canvas.getContext("2d");
  12. MyImg.onload = function ()
  13. {
  14. pxt.drawImage(MyImg, 0, 0);
  15. ImgChange();
  16. }
  17. MyImg.src = "image/2.jpg";
  18. }
  19. }
  20. function ImgChange()
  21. {
  22. for (i = 0; i <= 1000; i++)
  23. {
  24. var x = Math.floor(Math.random() * 500);
  25. var y = Math.floor(Math.random() * 500);
  26. pxt.fillStyle = "white";
  27. pxt.beginPath();
  28. pxt.arc(x, y, 3, 0, Math.PI * 2, true);
  29. pxt.closePath();
  30. pxt.fill();
  31. }
  32. }
  33. </script>
  34. <style type="text/css">
  35. #myPhoto
  36. {
  37. width: 386px;
  38. height: 255px;
  39. }
  40. </style>
  41. </head>
  42. <body onload="Img()" bgcolor="#cc6699">
  43. <h1>
  44. Tom application
  45. </h1>
  46. <img id="myPhoto" src="image/2.jpg">
  47. <canvas id="myCanvas" width="386" height="255">
  48. </canvas>
  49. </body>
  50. </html>
Step 8: Press Ctrl + F5 to run an application in a browser.
Output
This is an original image.
out4.gif
This a texture image.
out 5.gif
out6.gif
out7.gif
Resources
Here are some useful resources: