Question

I am knocking up a html5, js, css3 app where my images shirt can change color.

My mock-up at the moment has the base image and the shirt image (.png) on top.

To get the alternative color (I intend 20 or so options & the same for trousers, shoes etc), I could have a dedicated .png file for each color, but that seems overkill.

Using paths with stroke() & fill() will achieve what I want, but I can’t find a method in documentation that explains how js can use paths in an image file (or what file format that might be). The examples I find draw the path within js.

Any suggestions re paths or perhaps alternative/better ways of achieving this?

Cheers

Answer 1

I think it would be easier to make a shirt.png image with transparency where the shirt is. You could then give the a CSS background to colorize the shirt. Should be the easiest and most flexible way I think.