canvas-paint-order.html (793B)
1 <!DOCTYPE html> 2 <title>Canvas paint order</title> 3 <link rel="author" title="Philip Rogers" href="pdr@chromium.org"> 4 <link rel="help" href="https://www.w3.org/TR/CSS2/zindex.html"> 5 <link rel="match" href="canvas-paint-order-ref.html"> 6 <style> 7 #canvas { 8 background: red; 9 width: 95px; 10 height: 95px; 11 } 12 #negative-margin { 13 display: inline-block; 14 width: 100px; 15 height: 100px; 16 background: green; 17 margin-left: -100px; 18 } 19 </style> 20 <canvas id="canvas"></canvas> 21 <!-- #negative-margin should paint fully on top of the canvas. --> 22 <div id="negative-margin"></div> 23 <script> 24 onload = function() { 25 var context = canvas.getContext("2d"); 26 context.save(); 27 context.fillStyle = "red"; 28 context.fillRect(0, 0, 500, 500); 29 context.restore(); 30 }; 31 </script>