| <!DOCTYPE html> |
| <html> |
| <body> |
| <canvas id='output' width='400' height='400'></canvas> |
| <script id='worker' type='text/worker'> |
| var ofc = new OffscreenCanvas(400, 400); |
| var ctx = ofc.getContext("2d"); |
| |
| ctx.font = "italic 12px sans-serif"; |
| ctx.fillStyle = "red"; |
| ctx.fillText("it's", 10, 10); |
| |
| ctx.font = "bold 30px sans-serif"; |
| ctx.fillStyle = "orange"; |
| ctx.textAlign = "center"; |
| ctx.fillText("SUNNY", 80, 50); |
| |
| ctx.textBaseline = "top"; |
| ctx.textAlign = "left"; |
| ctx.font = "italic 50px serif"; |
| 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.filter = "drop-shadow(0 1ex black)"; |
| ctx.font = "italic bold 16px courier"; |
| ctx.fillText("isn't it?", 10, 130); |
| |
| var im = ofc.transferToImageBitmap(); |
| self.postMessage(im, [im]); |
| </script> |
| |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| } |
| |
| var blob = new Blob([document.getElementById('worker').textContent]); |
| var worker = new Worker(URL.createObjectURL(blob)); |
| |
| worker.addEventListener('message', ev => { |
| var im = ev.data; |
| var ctx = document.getElementById("output").getContext("bitmaprenderer"); |
| ctx.transferFromImageBitmap(im); |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| }); |
| |
| </script> |
| </body> |
| </html> |
