<!DOCTYPE html>
<canvas width=100 height=100></canvas>
<script>
var img = new Image();
img.src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="%23008000"/></svg>';
img.onload = function() {
    var c = document.querySelector('canvas').getContext('2d');
    c.globalAlpha = 0.5;
    c.drawImage(img, 0, 0);
}
</script>