geometry-border-image-004-ref.html (762B)
1 <!DOCTYPE html> 2 <html> 3 <style> 4 html, body { margin: 0; padding: 0; } 5 </style> 6 <body> 7 <canvas id ="canvas" width="120" height="120"></canvas> 8 <script> 9 var canvas = document.getElementById('canvas'); 10 var context = canvas.getContext("2d"); 11 // The test geometry-border-image4.html has a 100*100 paint canvas, it specifies 12 // border-width=10 and border-image-outset=10, which means that it is drawing to 13 // a 140*140 area. However, because the test has "border-image-slice: 0 fill", 14 // together with the border-width=10, makes it draw to a 120*120 area. 15 // In this ref html, we draw to a 140*140 area, but scale it to fit the 120*120 16 // canvas. 17 context.scale(120/140, 120/140); 18 context.fillStyle = 'green'; 19 context.fillRect(0, 0, 140, 140); 20 </script> 21 </body> 22 </html>