What web technology to opt for to offer interactive colouring?

Question

A customer has asked us to a add a feature to his website allowing visitors to colour in panels in a simple line drawing.

The website visitor will have a limited palette to choose from and will select a colour and click in a shape within the line drawing to colour it in as in:

There will only be four or five of these line drawings. The drawings themselves are not required to be interactive or flexible, only the colouring.

The line drawings will be super simple and we don't need to save the visitor's selections although the visitor will want to print or email the result.

Simple simple stuff. Most of the time where you see this done on sophisticated websites I assume it's done with Flash.

But is Flash the only way to go? Or can it be done with JQuery/Javascript or Silverlight or something else? Our team's knowledge covers ASP.NET, HTML, CSS, Javascript. No experience of Flash.

Answer 1

My guess is that you could use the new HTML 5 canvas element to achieve this goal in an open, standards compliant manner.

Note: canvas is a new feature and is only supported in recent browser releases (latest Safari, Firefox or Chrome for example).

Answer 2

You can't draw these kinds of shape without using canvas or SVG. And I am not sure about the support provided by browsers for these.

If you can go for canvas then you ca ntake a look at

Processing js library

or for SVG

Raphaël—JavaScript Library

Answer 3

There are only two ways i can think of atm:

• Split the line drawings into the colourable elements and show each image absolutly positioned to merge the images into one on the website.
  Use Javascript to load a pre-coloured image of that part with "onclick" (or generate a coloured version with asp/php/whatever server-side.
  Not sure if it's possible to print absolute positioned elements cleanly.
• Use flash, it's simple there so even without experience you should be able to do it in 1-2 workdays.

Answer 4

If you have a finite number of line drawings, and a limited number of colours, you could just pre-generate every possible colour/section combination - isolate each area as a transparent GIF/PNG and composite them using position:absolute to create an "onion skin" / animation cel effect. Use some old-school HTML image-map code (or server-side parsing of the myimage.X / myimage.Y parameters, or jQuery) to work out where they clicked, identify the image section under the mouse click location, and replace that image only with the corresponding version in their selected colour.