2d.layer.nested.w.html (1611B)
1 <!DOCTYPE html> 2 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> 3 <meta charset="UTF-8"> 4 <html class="reftest-wait"> 5 <link rel="match" href="2d.layer.nested-expected.html"> 6 <title>Canvas test: 2d.layer.nested</title> 7 <h1>2d.layer.nested</h1> 8 <p class="desc">Tests nested canvas layers.</p> 9 <canvas id="canvas" width="200" height="200"> 10 <p class="fallback">FAIL (fallback content)</p> 11 </canvas> 12 <script id='myWorker' type='text/worker'> 13 self.onmessage = function(e) { 14 const canvas = new OffscreenCanvas(200, 200); 15 const ctx = canvas.getContext('2d'); 16 17 var circle = new Path2D(); 18 circle.arc(90, 90, 40, 0, 2 * Math.PI); 19 ctx.fill(circle); 20 21 ctx.globalCompositeOperation = 'source-in'; 22 23 ctx.beginLayer(); 24 25 ctx.fillStyle = 'rgba(0, 0, 255, 1)'; 26 ctx.fillRect(60, 60, 75, 50); 27 28 ctx.globalAlpha = 0.5; 29 30 ctx.beginLayer(); 31 32 ctx.fillStyle = 'rgba(225, 0, 0, 1)'; 33 ctx.fillRect(50, 50, 75, 50); 34 ctx.fillStyle = 'rgba(0, 255, 0, 1)'; 35 ctx.fillRect(70, 70, 75, 50); 36 37 ctx.endLayer(); 38 ctx.endLayer(); 39 40 const bitmap = canvas.transferToImageBitmap(); 41 self.postMessage(bitmap, bitmap); 42 }; 43 </script> 44 <script> 45 const blob = new Blob([document.getElementById('myWorker').textContent]); 46 const worker = new Worker(URL.createObjectURL(blob)); 47 worker.addEventListener('message', msg => { 48 const outputCtx = document.getElementById("canvas").getContext('2d'); 49 outputCtx.drawImage(msg.data, 0, 0); 50 document.documentElement.classList.remove("reftest-wait"); 51 }); 52 worker.postMessage(null); 53 </script> 54 </html>