how to send DIV content to html5 CANVAS

Question

Is it possible to "draw" the content of a div to a canvas... i have done the div manipulation with css, but need canvas to "save" the content to jpg with the .dataToURL function

so the question is... do you know a HTML, CSS, jQuery function that transfer the content of a div and draw it to a canvas

thanks in advance

Answer 1

<canvas> does not directly support placing HTML content on it, as combining this with <IFRAME> could potentially lead to lost of private information.

What you can do is that you dynamically create SVG image and then draw this on <canvas>. SVG has better support for rich-text formatting than <canvas>.

jQuery library for dynamic SVG creation:

http://keith-wood.name/svg.html

(See Text example)

Answer 2

Check out html2Canvas, it takes a dom element and converts it to a canvas, and then you can draw that canvas onto another canvas something like this:

http://html2canvas.hertzen.com/

var domElement = document.getElementById('myElementId');
html2canvas(domElement, {
    onrendered: function (domElementCanvas) {
        var canvas = document.createElement('canvas');
        canvas.getContext('2d').drawImage(domElementCanvas, 0, 0, 100, 100);

        // do something with canvas
    }
}