Direct conversion from canvas to svg?

[westoncraig]

Rather than just taking an existing canvas and using drawImage to insert an image tag inside of an svg tag, I was expecting a direct translation of each node into a path or text or other valid svg options.

Is this something that is planned, rather than having to use the mock canvas?

The reason I ask is that I am currently prototyping html2canvas.js in an attempt to get a screenshot on the client-side to be persisted for auditing purposes. This does work, but I was wondering about a side-by-side comparison and svg would also give event options too.

Thanks

[gwwar]

Like the method suggests when you call drawImage, it takes in a bitmap (canvas, image or video) and draws it to the existing canvas. Creating an image tag in SVG is a decent mapping for that. http://www.w3.org/TR/2014/CR-2dcontext-20140821/#dom-context-2d-drawimage

You can't actually "transform" a canvas element that's has already been drawn to as it's just a bitmap. When you export to SVG you're really just calling the same drawing function again using a fake context. Suggested usage is to reuse the same drawing method, and you will get path, text and other elements, provided that your drawing function isn't just calling a bunch of drawImage commands:

//create a canvas2svg mock context
var myMockContext = new C2S(500,500); //pass in your desired SVG document width/height

var draw = function(ctx) {
    //do your normal drawing
    ctx.fillRect(0,0,200,200);
    //etc...
}

draw(myMockContext);
myMockContext.getSerializedSvg(); //returns the serialized SVG document
myMockContext.getSvg(); //inline svg

Accurate screenshots of the webpage can be accomplished through other means:

1. Using a headless browser like phantomJS.
2. https://developer.chrome.com/extensions/tabCapture if you're writing an extension
3. Any other js client side implementation of a DOM renderer.

I'm not sure what you would get from exporting the canvas to svg in this case, as the html of the page and the serialization of the canvas (using canvas.toDataURL) to an image would be more interesting.