blend-canvas.html (565B)
1 <!-- 2 Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ 4 --> 5 <html> 6 <script type="text/javascript"> 7 window.onload = function() { 8 var c = document.getElementById("b"); 9 var ctx = c.getContext("2d"); 10 ctx.fillStyle = "rgb(0,255,0)"; 11 ctx.fillRect(0,0,100,100); 12 } 13 </script> 14 <style> 15 #a { 16 width: 200px; 17 height: 200px; 18 background-color: rgb(0,255,0); 19 } 20 #b { 21 width: 100px; 22 height: 100px; 23 mix-blend-mode:difference; 24 } 25 </style> 26 <div id="a"> 27 <canvas width="100" height="100" id="b"/> 28 </div> 29 </html>