Introduction

This is a simple article for beginners that helps to show how to create a text mirror using HTML 5 tools. We know that HTML 5 is an advanced version of HTML used to create 3D, animation and multimedia applications. Now in this article, we use one tag of an HTML 5; that name is a canvas. A canvas tag is mainly used to display data or an image on a browser. Now in this application, we simply create an initialization function that simply calls in a <body> tag with the help of an unload event. I hope this article helps to show how to create a text mirror using HTML 5 tools.
Step 1: Create an HTML file using an HTML editor such as Notepad or Visual Studio.
wakakakakak.gif
Step 2: Create a folder on the desktop.
folder.gif
Step 3: Open Visual Studio.
new.gif
webapplication.gif
Step 4: Add an HTML file to your web application.
html.gif
Step 5: Now in this step we create an init() function. We set all properties of a text mirror application; that is font, font-style, fill-text etc.
Code
  1. function init()
  2. {
  3. can = document.getElementById("can");
  4. pxt = can.getContext("2d");
  5. pxt.fillStyle = "blue";
  6. pxt.font = "100pt Comic Sans MS";
  7. pxt.fillText(" McnProfessionals", 0, 100);
  8. pxt.setTransform(1, 0, 0, -1, 0, 0);
  9. pxt.fillStyle = "#800000";
  10. pxt.fillText(" McnProfessionals", 0, -100);
  11. }
Step 6: Now in this application we create three text mirrors. Define the functionality of the first text mirror which is given below; in this step we create two variables named can and rxt. The can variable is used to assign an id and the rxt variable is used to set all the properties of a text mirror.
Code
  1. <script type="text/javascript">
  2. var can;
  3. var rxt;
  4. function init()
  5. {
  6. can = document.getElementById("can");
  7. rxt = can.getContext("2d");
  8. rxt.fillStyle = "blue";
  9. rxt.font = "100pt Aharoni";
  10. rxt.fillText("Csharpcorner", 0, 100);
  11. rxt.setTransform(1, 0, 0, -1, 0, 0);
  12. rxt.fillStyle = "#00CC66";
  13. rxt.fillText("Csharpcorner", 0, -100);
  14. rxt = can.getContext("2d");
  15. rxt.fillStyle = "blue";
  16. rxt.font = "100pt Aharoni";
  17. }
  18. </script>
Step 7: Now define all the functionality of the second text mirror. In this step, we create two variables named can and pxt. The can variable is used to assign an id and insert the pxt variable is used to set all the properties of a text mirror.
Code
  1. <script type="text/javascript">
  2. var can;
  3. var pxt;
  4. function init()
  5. {
  6. can = document.getElementById("can");
  7. pxt = can.getContext("2d");
  8. pxt.fillStyle = "blue";
  9. pxt.font = "100pt Aharoni";
  10. pxt.fillText("Mindcracker", 0, 100);
  11. pxt.setTransform(1, 0, 0, -1, 0, 0);
  12. pxt.fillStyle = "red";
  13. pxt.fillText("Mindcracker", 0, -100);
  14. }
  15. </script>
Step 8: Now define all the functionality of insert the third text mirror. In this step, we create two variables named can and axt. The can variable is used to assign an id and the axt variable is used to set all the properties of a text mirror.
Code
  1. <script type="text/javascript">
  2. var can;
  3. var axt;
  4. function init() {
  5. can = document.getElementById("can");
  6. axt = can.getContext("2d");
  7. axt.fillStyle = "blue";
  8. axt.font = "100pt Comic Sans MS";
  9. axt.fillText(" McnProfessionals", 0, 100);
  10. axt.setTransform(1, 0, 0, -1, 0, 0);
  11. axt.fillStyle = "#800000";
  12. axt.fillText(" McnProfessionals", 0, -100);
  13. }
  14. </script>
Step 9: The complete code of a text mirror application is as given below.
Code
  1. <html>
  3. <head>
  5. <title>Tom Application</title>
  7. // This is a first text mirror functionality.
  9. <script type="text/javascript">
  10. var can;
  11. var rxt;
  12. function init()
  13. {
  14. can = document.getElementById("can");
  15. rxt = can.getContext("2d");
  16. rxt.fillStyle = "blue";
  17. rxt.font = "100pt Aharoni";
  18. rxt.fillText("Csharpcorner", 0, 100);
  19. rxt.setTransform(1, 0, 0, -1, 0, 0);
  20. rxt.fillStyle = "#00CC66";
  21. rxt.fillText("Csharpcorner", 0, -100);
  22. rxt = can.getContext("2d");
  23. rxt.fillStyle = "blue";
  24. rxt.font = "100pt Aharoni";
  25. }
  26. </script>
  27. // This is a second text mirror functionality.
  28. <script type="text/javascript">
  29. var can;
  30. var pxt;
  31. function init()
  32. {
  33. can = document.getElementById("can");
  34. pxt = can.getContext("2d");
  35. pxt.fillStyle = "blue";
  36. pxt.font = "100pt Aharoni";
  37. pxt.fillText("Mindcracker", 0, 100);
  38. pxt.setTransform(1, 0, 0, -1, 0, 0);
  39. pxt.fillStyle = "red";
  40. pxt.fillText("Mindcracker", 0, -100);
  41. }
  42. </script>
  44. // This is a third text mirror functionality.
  46. <script type="text/javascript">
  47. var can;
  48. var axt;
  49. function init() {
  50. can = document.getElementById("can");
  51. axt = can.getContext("2d");
  52. axt.fillStyle = "blue";
  53. axt.font = "100pt Comic Sans MS";
  54. axt.fillText(" McnProfessionals", 0, 100);
  55. axt.setTransform(1, 0, 0, -1, 0, 0);
  56. axt.fillStyle = "#800000";
  57. axt.fillText(" McnProfessionals", 0, -100);
  58. }
  59. </script>
  60. </head>
  61. <body onload="init()" bgcolor="#66ffff">
  62. <h1>Tom developed mirror of text</h1>
  63. <canvas id="can" height="400" width="1200"></canvas>
  64. </body>
  65. </html>
Step 10: Press Ctrl + f5 to run the application in a browser.
Output
This is the first text mirror:
2.gif
This is the second text mirror
1.gif
This is the third text mirror
3.gif
Resources
Here are some useful resources: