| <!DOCTYPE html> |
| <html> |
| <body> |
| <canvas id='output' width='400' height='400'></canvas> |
| <script> |
| var ofc = new OffscreenCanvas(400, 400); |
| var ctx = ofc.getContext("2d"); |
| |
| ctx.font = "italic 12px arial"; |
| ctx.fillStyle = "red"; |
| ctx.fillText("it's", 10, 10); |
| |
| ctx.font = "bold 30px arial"; |
| ctx.fillStyle = "orange"; |
| ctx.textAlign = "center"; |
| ctx.fillText("SUNNY", 80, 50); |
| |
| ctx.textBaseline = "top"; |
| ctx.textAlign = "left"; |
| ctx.font = "italic 50px times"; |
| var p = ctx.measureText("outside"); |
| |
| ctx.fillStyle = "purple"; |
| ctx.fillRect(50, 70, p.width, 50); |
| ctx.strokeStyle = "white"; |
| ctx.strokeText("outside", 50, 70); |
| |
| ctx.fillStyle = "black"; |
| ctx.font = "italic bold 30px courier"; |
| ctx.fillText("isn't it?", 10, 130); |
| |
| |
| var c = document.getElementById("output").getContext("2d"); |
| c.drawImage(ofc, 0, 0); |
| |
| </script> |
| </body> |
| </html> |
