4

I got some graphic design that was made using JavaScript / Html5 Canvas.

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

now, i need to give this graphic element to a graphic designer in some format he can work with: in either photoshop or Illustrator friendly formats.

Now, of course i can take a screenshot and start working my way from there, but i do need this graphic in a vector format i could use later more robustly.

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

Talbatz
  • 235
  • 3
  • 11
  • I don't think that it is possible. – noob Jan 05 '12 at 15:37
  • 2
    I'm not aware of a way, but note that canvas is *pixel-based*, so converting a canvas image to SVG is not really possible. – pimvdb Jan 05 '12 at 15:38
  • 1
    Thanks guys, pimvdb - you're right, canvas is pixelated, but canvas in this case is only used for showcasing the javascript vectors. so we're looking for javascript-to-vector conversion more than canvas-to-vector... sorry if i was unclear about this – Talbatz Jan 05 '12 at 16:08

2 Answers2

5

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

Just paste the relevant bits of your code into one of the left textareas and click "do it", then copy the svg output from the textarea on the right.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
2

Like others commented, there's no tool that would help you make a Canvas -> SVG conversion. However, the code isn't too different. Since the sample you gave is rather small, you could use Raphael.js to generate SVG and convert the code you posted to Raphael.js:

http://raphaeljs.com/

UPDATE

A little more detail

  1. include Raphael.js
  2. go through your script line by line and try to find equivalents in Raphael.js. For example, the rgb color stuff you're doing would use this: http://raphaeljs.com/reference.html#Raphael.rgb
  3. run the resulting js
  4. save the generated SVG
Milimetric
  • 13,411
  • 4
  • 44
  • 56
  • Hey, this sounds like a possible solution... could you please elaborate? i must admit i don't understand you completely – Talbatz Jan 05 '12 at 16:05
  • btw, I really liked the SVGCanvas that @Erik Dahlstrom pointed out. You should mark an answer as accepted (I suggest his) – Milimetric Jan 13 '12 at 16:57