CODEWITHSUNDEEP
canvassvgpng
Kristi Simonson
Kristi Simonson

Reputation: 515

Should I use SVG or Canvas for a Paper Doll Game?

I'm working on creating a new version of my paper doll game here.

Right now it's in Flash. I'd like to update it to HTML 5, but I'm not sure whether to use SVG, or images drawn in Canvas, or pngs imported into Canvas. I imagine any would work, from a technical standpoint, but I'd like to take performance into account.

Some facts/requirements:

  1. I have Adobe Illustrator for image editing, and Photoshop. Also Adobe Edge Animate, if that's of any value.
  2. When I add a new image, like a shirt, it would be nice to just be able to drop it into a folder, labelled "shirts" and have it integrate into the program without having to go in and type the filename into an array on the page. Using PHP I suspect I could read from the directory for this, but I'm not sure if SVG or canvas drawings can be stored in separate files like thatI
  3. I need to be able to adjust the color on each item. I imagine i'd use CSS filters for this?
  4. For some items, I would like to be able to change the color on only part of an item (like the color of a flower, but not its leaves). In Flash this was done by applying the color filter to only one layer of an element. Not sure how that could be handled here. Perhaps by having two arrays with separate, related images in each that overlap each other, and applying the color filter to only one.
  5. At the end of the user's changes, they should be able to save the image to their computer, or I should be able to save their creation to a directory on the server. I had this working on the Flash version, but it's broken at the moment. I know why and can use the same process in a new system, but there may be a simpler way. I've heard it's easy to save the contents of the canvas.
  6. Overlapping shapes must have smooth edges, not aliasing.
  7. Needs to work on iPad and iPhone. A lot of the samples of canvas and SVG I've seen aren't really working properly on my iPhone, though I did find a working SVG doll program similar to this.

Some of these should perhaps have been multiple questions, but hopefully you can point me in the right direction. I'm confident I can figure the code out, whichever method I attempt, but I don't want to start out in the wrong direction and waste time, as my knowledge of SVG and Canvas is still limited.

Thank you.

Upvotes: 0

Views: 961

Answers (1)

markE
markE

Reputation: 105015

My 2-Cents:

...

Adobe Illustrator:

Storing New Images:

  • Since you are manipulating sub-components of your images, you will probably want to save your images as paths, rather than image files. In both SVG and Canvas paths, the data is simple text – easy to store and serve.

Adjust colors on components:

  • SVG can do this directly by changing a component’s “fill” attribute.
  • Canvas can do this with it’s compositing ability. This is just slightly more complex to set up and involves layering. To change the color of a shirt, you'll want to create a separate layer containing the shirt color. Then you can composite any new color onto that layer. After that it’s easy and effective. Alternatively, with a slight bit of programming effort you can identify any path to be recolored and redraw that path with a different "fillStyle".

Allow the user to save the image to their local file system:

  • Neither SVG or Canvas do this natively because of security reasons.
  • Simple solution: You can open a new browser window and have them right-click-save-as.
  • More complex solution: Bounce the image off your web server and let the user download it from the server

No antialiasing:

  • Only SVG allows you to disable anti-aliasing.
  • Canvas does a great job of anti-aliasing, but you can’t shut anti-aliasing off.

Needs to work on iPad/iPhone:

  • Both SVG and Canvas are supported so your app should work.
  • As always, be sure to test a micro-app to be sure !!

Conclusion:

Both SVG and Canvas have the capabilities you’re looking for, but SVG seems a slightly better fit:

  • SVG can natively use AI images exported to svg format.
  • SVG gets slow when drawing many objects, but you’re drawing just a few components (no problem).
  • SVG natively allows you to recolor paths.
  • SVG lets you turn off anti-aliasing (but in my experience, this is a bad idea--keep it on!)
  • Canvas excels at drawing thousands of shapes very quickly—animation! (not needed in your case)

Upvotes: 3

Related Questions