title: draw image with opacity on to a canvas
body: <p>I've got an image. I use <code>drawImage()</code> to draw it on to a canvas. </p>
  
  <p>My question is: If the image has an opacity of 0.4, how do I draw it in the same opacity on to the canvas.</p>
  
  <p>I've created a sample <a href="http://jsfiddle.net/0qz7f131/1/" rel="noreferrer">Fiddle here</a>. How can I draw <code>#scream</code> on to <code>mycanvas</code> maintaining 0.4 opacity on the image.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;p&gt;Image with 0.4 opacity to be used:&lt;/p&gt;
  &lt;img id="scream" width="200" height="200" src="http://img42.com/NMMU8+"&gt;
  
  &lt;p&gt;Canvas:&lt;/p&gt;
  &lt;canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;"&gt;
  &lt;/canvas&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#scream{
      opacity: 0.4;
  }
  #myCanvas{
      background-color: #f60;
  }
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>window.onload = function() {
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var img = document.getElementById("scream");
      ctx.drawImage(img, 10, 10);
  }
  </code></pre>