Using Html5 / Javascript Graphics in a Graphics Editor

Question

I got a graphic design that was created using JavaScript / Html5 Canvas.

Take a look here: http://yeda.us/js/logos.js

now, I have to provide the graphic element to the graphic designer in some format that he can work with: in photoshop format or in Illustrator format.

Now, of course, I can take a screenshot and start working from there, but I need this graphics in vector format, which I could use later more reliably.

Is there a way to convert the above code into graphics? maybe somehow convert it to SVG?

Answer 1

Check the SVGCanvas , which defines an API compatible with the HTML5 canvas, which creates the SVG output from drawing commands. It probably can't handle everything, but your simple example will hopefully work fine.

Just paste the appropriate bits of your code into one of the left text areas and click “do it”, and then copy the svg output from textarea to the right.

Answer 2

Like other comments, there is no tool to help you do Canvas → SVG conversion. However, the code is not too different. Since the sample you gave is pretty small, you can use Raphael.js to generate SVG and convert the code you sent to Raphael.js:

http://raphaeljs.com/

UPDATE

A bit more

• enable raphael.js
• go through the script line by line and try to find the equivalents in Raphael.js. For example, the rgb stuff you do will use this: http://raphaeljs.com/reference.html#Raphael.rgb
• run the created js
• save generated SVG