How to colorize in HTML?

Question

Mobile development

Good afternoon!
I wanted to ask the people of Khabrov if there is any way to create an application like a browser-based children's coloring using web technologies so that it works on the Ipad (android support would be a good plus)? The idea of ​​such a coloring is to paint certain areas with the desired color. The child selected a color, clicked on an area, and the area was colored.
Now for me the main problem is how to properly store the painted areas.
It seems to me that it will be impossible to use it due to the complexity of the shape of each of the polygons.
A cursory research led to svg. The shape of such a polygon can be drawn in a vector editor and then programmatically control the color, which is good (we are not talking about support in Android since version 4.0). But I didn't find any information about handling clicks in such areas.
Therefore, I have 2 questions:
1) Is it possible to process clicks on SVG fragments (or whole pictures) through javascript?
2) Perhaps there are some other adequate ways to set complex shapes, change their color and handle clicks?

Answer 1

This will probably save the father of Russian democracy habrahabr.ru/post/123793/

Answer 2

1. You can.
2.Canvas.

Answer 3

The easiest option is SVG. You can safely draw the desired contours and paint over them. Complete freedom of action, will work on iOS and androids. On Canvas, this is actually much more difficult to do. And yes, it doesn't make much sense.
The only problem may be the formation of these very contours ... But this is another task.

Answer 4

I have worked with Raphaël . With the help of this library, you can make a coloring, here is an example of a map - it seems to be almost what you need.

Answer 5

Take an image with outlines and translucent areas, no fill, give it the highest z-index. Outline its area map. Create a lot of pictures of the desired zones with the desired fill. Hang up a click event on the map. When clicking, insert an image with the desired area and color, z-index is lower than that of the main image. Just enough to do, and it will be cross-browser.

Answer 6

This will probably save the father of Russian democracy habrahabr.ru/post/123793/

Answer 7

>> The child selected a color, clicked on an area, and the area was colored.
You see, the meaning of coloring is, as it were, in training the motor skills of the fingers. So that the child learns to stop the pen in time, to emphasize the boundaries.

Answer 8

You can do it with SVG.