<html> <head> <script type="text/javascript"> function go() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var image = document.getElementById("image"); // Draw some orange ctx.fillStyle = "orange"; ctx.fillRect(0, 0, 100, 100); ctx.globalAlpha = 0.25; ctx.drawImage(image, 0, 0); } </script> </head> <body onload="go()"> <canvas id="canvas" width="200" height="200"></canvas> <img id="image" src="lime100x100.svg" style="display: none"> </body> </html>