OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <body> |
| 4 <canvas id='output' width='150' height='150'></canvas> |
| 5 <script id='myWorker' type='text/worker'> |
| 6 self.onmessage = function(e) { |
| 7 var aCanvas = new OffscreenCanvas(150, 150); |
| 8 var ctx = aCanvas.getContext('2d'); |
| 9 |
| 10 var myPattern = ctx.createPattern(e.data, 'repeat'); |
| 11 ctx.fillStyle = myPattern; |
| 12 ctx.fillRect(0, 0, aCanvas.width, aCanvas.height); |
| 13 |
| 14 var image = aCanvas.transferToImageBitmap(); |
| 15 self.postMessage(image, [image]); |
| 16 }; |
| 17 </script> |
| 18 <script> |
| 19 if (window.testRunner) { |
| 20 testRunner.waitUntilDone(); |
| 21 } |
| 22 |
| 23 var patternCanvas = document.createElement('canvas'); |
| 24 patternCanvas.width = 30; |
| 25 patternCanvas.height = 30; |
| 26 var patternCtx = patternCanvas.getContext('2d'); |
| 27 patternCtx.fillStyle = '#f00';
|
| 28 patternCtx.fillRect(0, 0, 15, 15); |
| 29 patternCtx.fillStyle = '#0f0';
|
| 30 patternCtx.fillRect(15, 0, 15, 15); |
| 31 patternCtx.fillStyle = '#00f'; |
| 32 patternCtx.fillRect(0, 15, 15, 15); |
| 33 patternCtx.fillStyle = "#ff0"; |
| 34 patternCtx.fillRect(15, 15, 15, 15); |
| 35 createImageBitmap(patternCanvas).then(consumeImageBitmap); |
| 36 |
| 37 function consumeImageBitmap(patternImage) { |
| 38 var blob = new Blob([document.getElementById('myWorker').textContent]); |
| 39 var worker = new Worker(URL.createObjectURL(blob)); |
| 40 worker.addEventListener('message', msg => { |
| 41 var outputCtx = document.getElementById('output').getContext('bitmaprender
er'); |
| 42 outputCtx.transferFromImageBitmap(msg.data); |
| 43 if (window.testRunner) { |
| 44 testRunner.notifyDone(); |
| 45 } |
| 46 }); |
| 47 worker.postMessage(patternImage, [patternImage]); |
| 48 } |
| 49 </script> |
| 50 </body> |
| 51 |
OLD | NEW |