Update canvas-print-text

study-hary-id · study-hary-id · commit 297a628890d2 · 2022-03-25T03:15:14.000+07:00
diff --git a/canvas-print-text/images/pangolin-font-sheet.png b/canvas-print-text/images/pangolin-font-sheet.png
diff --git a/canvas-print-text/index.html b/canvas-print-text/index.html
@@ -14,15 +14,36 @@
         overflow: hidden;
         background-color: grey;
       }
+      h4 {
+        margin: 0;
+        text-align: center;
+      }
+      div {
+        display: inline-block;
+      }
       #main-canvas {
+        background-color: white;
         display: inline-block;
         margin: 0 auto;
         padding: 0;
       }
+      #second-canvas,
+      #html-text {
+        background-color: white;
+      }
     </style>
   </head>
   <body>
-    <canvas id="main-canvas"></canvas>
+    <div>
+      <h4>Empty canvas element</h4>
+      <canvas id="main-canvas"></canvas>
+    </div>
+    <div id="canvas-text">
+      <h4>Print text on canvas</h4>
+    </div>
+    <div id="html-text">
+      <h4>Print text on html</h4>
+    </div>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/canvas-print-text/script.js b/canvas-print-text/script.js
@@ -1,12 +1,16 @@
 // Print text on canvas element using fillText.
+var canvasText = document.getElementById("canvas-text");
 var canvas = document.createElement("canvas");
 var context = canvas.getContext("2d");
-document.body.appendChild(canvas);
+
+canvas.setAttribute("id", "second-canvas");
+canvasText.appendChild(canvas);
 
 context.font = "20px arial";
 context.fillText("xyz", 50, 50);
 
 // Print text directly to html document using write method.
+var htmlText = document.getElementById("html-text");
 document.body.style.fontFamily = "arial";
 document.body.style.fontSize = "20px";
 document.write("xyz");
