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