<!DOCTYPE html>
<html>
<body>
  <canvas id="canvas"></canvas>
  <script>
    var canvas = document.getElementById("canvas");
    canvas.width  = 150;
    canvas.height = 150;
    
    var context = canvas.getContext("2d");    
    context.strokeStyle = "green";
    context.lineWidth = 50;
    context.strokeRect(0,0,150,150);

    var svgImage = new Image();
    svgImage.onload = function() {
      context.globalAlpha = 0.2;
	  context.drawImage(svgImage, 25, 25);
    };
    
    svgImage.src = "data:image/svg+xml, \
    <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'> \
      <rect width='100%' height='100%' style='fill:none;stroke:green;stroke-width:50%;'/> \
      <rect x='25%' y='25%' width='50%' height='50%' fill='green' fill-opacity='0.2'/> \
    </svg>";
  </script>
</body>
</html>