XML : Generate SVG for HTML5 Canvas

I want to generate SVG as HTMLImageElement, so I can put it on element. So here I am:

  function makeButton(evt) {      var svgns = "http://www.w3.org/2000/svg";        var svg = document.createElementNS(svgns, "svg");      svg.setAttribute('style', 'border: 1px solid black');      svg.setAttribute('width', '59');      svg.setAttribute('height', '59');      svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");        var shape = document.createElementNS(svgns, "circle");      shape.setAttributeNS(null, "cx", 25);      shape.setAttributeNS(null, "cy", 25);      shape.setAttributeNS(null, "r",  20);      shape.setAttributeNS(null, "fill", "grey");        svg.appendChild(shape);      return svg;  }    

And then:

  var myButton = makeButton();  canvasContext.drawImage(myButton, offsetX, offsetY, width, height);    

and it says, myButton is not an HTMLImageElement (is it XML) ?