<!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <html> <script type="text/javascript"> window.onload = function() { var c = document.getElementById("b"); var ctx = c.getContext("2d"); ctx.fillStyle = "rgb(0,255,0)"; ctx.fillRect(0,0,100,100); } </script> <style> #a { width: 200px; height: 200px; background-color: rgb(0,255,0); } #b { width: 100px; height: 100px; mix-blend-mode:difference; } </style> <div id="a"> <canvas width="100" height="100" id="b"/> </div> </html>