paint2d-paths.https.html (1316B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <link rel="help" href="https://drafts.css-houdini.org/css-paint-api/"> 4 <link rel="match" href="paint2d-paths-ref.html"> 5 <style> 6 #output { 7 width: 300px; 8 height: 400px; 9 background-image: paint(paths); 10 } 11 </style> 12 <script src="/common/reftest-wait.js"></script> 13 <script src="/common/worklet-reftest.js"></script> 14 <body> 15 <div id="output"></div> 16 17 <script id="code" type="text/worklet"> 18 registerPaint('paths', class { 19 paint(ctx, geom) { 20 ctx.beginPath(); 21 ctx.lineWidth = '10'; 22 ctx.strokeStyle = 'green'; 23 ctx.moveTo(15, 15); 24 ctx.lineTo(135, 15); 25 ctx.lineTo(70, 170); 26 ctx.closePath(); 27 ctx.stroke(); 28 29 var path1 = new Path2D(); 30 path1.moveTo(250, 25); 31 path1.bezierCurveTo(110, 150, 110, 300, 200, 200); 32 ctx.strokeStyle = 'purple'; 33 ctx.setLineDash([ 10, 5 ]); 34 ctx.stroke(path1); 35 36 ctx.fillStyle = 'red'; 37 ctx.beginPath() 38 ctx.arc(75, 325, 50, 0, Math.PI * 2, true); 39 ctx.arc(75, 325, 20, 0, Math.PI * 2, true); 40 ctx.fill('evenodd'); 41 } 42 }); 43 </script> 44 45 <script> 46 importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); 47 </script> 48 </body> 49 </html>