<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>&lt;canvas>.drawImage(SVGSVGElement, dx, dy, dw, dh)</title>
  <style>
   svg, canvas { margin:1em }
  </style>
 </head>
 <body>
  <p>There should be one green circle below:</p>
  <p><canvas width="100" height="100" id="c">FAIL</canvas></p>
  <script>
   var c = document.getElementById("c").getContext("2d"),
       i = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
       circle = document.createElementNS("http://www.w3.org/2000/svg", "circle")
   i.setAttribute("width", "100px")
   i.setAttribute("height", "100px")
   circle.setAttribute("cx", "50px")
   circle.setAttribute("cy", "50px")
   circle.setAttribute("r", "50px")
   circle.setAttribute("fill", "lime")
   i.appendChild(circle)
   c.drawImage(i, 0, 0, 100, 100)
  </script>
 </body>
</html>

