I like Drawing Images, too.

[mpelham]

var dom = $('<img src="source/asset/img/tile.png"/>').appendTo('body') var dom2 = $('<div id="foo" style="background: url(source/asset/img/tile.png)">Howdy!</div>').appendTo('body')

domvas.toImage(dom[0], function() { ctx.drawImage(this, 0,0); });

Adding an img tag does not seem to render.

Trying a div with a background tag seems to prevent even the div from rendering, let alone rendering just some of the DIV's contents.

(Just making your life harder :D)

[rsaccon]

Also having the same problem not being able to draw images. Any ideas on this ?

[kanakiyajay]

Partial answer -> get the base64 string of image and this add the image to the XMLSerializer. http://stackoverflow.com/questions/3771649/how-to-show-image-inside-xml

[kanakiyajay]

I found a way to make this work . Convert the src atributes of all images to base64 strings. Here is the code (will require jQuery)

var imgArray = $('img');
for (var i = 0; i < imgArray.length; i++) {

var dataUrl = getBase64Image(imgArray[i]);
$(imgArray[i]).attr('src',dataUrl);

};

function getBase64Image(img) {
                // Create an empty canvas element
                var canvas = document.createElement("canvas");
                canvas.width = img.width;
                canvas.height = img.height;

                // Copy the image contents to the canvas
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0);

                    return canvas.toDataURL("image/png");
}

[PowerMugen]

Hello, I love this script and I think it would be great to draw images.

I am searching how to achieve this with a loader like this one:

http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/

I made more test and the tools already works with css background images, so in my case it can do the trick. But i'll keep on searching.

[LukyVj]

Hello guys, I had the same problem, the solution is to get your image url as a base64 string.