6

I am facing a problem for drawing a complex image using canvas tag and using JavaScript.

I need a tool, or we can say editor, by using which I can draw any image. It returns Javascript code using canvas, which I can include in html pages.

Thanks!

Grace Huang
  • 5,355
  • 5
  • 30
  • 52
Anurag
  • 227
  • 1
  • 5
  • 14

3 Answers3

11

I have a project where you can draw complex canvas shapes and export them into an HTML file. You can then edit the file as required

My project is at http://canvimation.github.com/

Hope this is of help

jing3142
  • 1,821
  • 1
  • 11
  • 16
6

For really complex images, use Adobe Illustrator to do the designing (a world class design editor).

Then save your image in .SVG format.

BTW, You can load the file (example "yourArt.svg") directly into an img tag.

But, more to your question, you can then use a canvas drawing library called FabricJS to read the svg and draw it to a canvas. The library website is: http://fabricjs.com/

Alternatively, you can use an online conversion tool to convert yourArt.svg into the required canvas drawing commands. A popular svg-to-canvas converter is: http://www.professorcloud.com/svg-to-canvas/

A word of warning...these techniques might require tweaking of the resulting canvas draw commands--especially if your artwork uses the more advanced techniques in Illustrator.

Your artwork can be very complex and still be handled! Check out the SVG section of the FabricJS demos: http://fabricjs.com/kitchensink/

markE
  • 102,905
  • 11
  • 164
  • 176
  • Looking around a bit this seems the only real option if you want to create and manipulate the some complex shapes. And the tooling for SVG (or other vector graphics format) is really top notch. – jl. Oct 16 '14 at 17:50
  • Also another tool that you could use is [Microsofts Expression Design](http://msdn.microsoft.com/en-US/expression) which seems free now. Has the option to export to SVG. – jl. Oct 16 '14 at 17:54
2

Another great online tool is called HTML Canvas Studio.

It behaves like other painting programs and when you finish, you can export the drawing to HTML+JS.

The tool can be found here: http://www.htmlcanvasstudio.com/

Guy Levinger
  • 161
  • 2
  • 8