How to colorize on canvas?

Question

JavaScript

There is such a site https://www.igraemsa.ru/igry-dlja-detej/risovalki with online coloring done on canvas js. Can you tell me how to do something like this? What ideas?

Answer 1

If you do not look at how it is implemented there, but think with your own head, then I would say that it is many times easier to do this using SVG. Coloring is essentially a vector picture with a large number of closed contours (elements path), which, at the drawing stage, are combined into groups (element g), which will then be painted in one color, clicking on a group is easily made standard addEventListener('click' ..., and filling is an attribute fillwith color . Well, the choice of pencils is a standard carousel, but not with pictures, but with a bunch of circles that you can click on and choose a color for filling.