How to color an image area in html?

Question

JavaScript

Tell me how to implement the following task on the site:
There is an image. It contains a product (goods). The product has several color options. The colors are arranged in a palette next to the image.
Task: change the color of the product (a given area on the image) by clicking on the corresponding color in the palette.

Answer 1

What is the html of this block?

Answer 2

The statement of the problem is a bit incomplete, and, accordingly, there can also be a lot of solutions. You can store a set of images with the naming style "ProdictId_ProductColor" and, by clicking on a color, change the src of the image to the desired one. Or do you want to exactly redraw the Canvas?
I would first clarify what you have. Product catalog and list of available colors?

Answer 3

beej.us/blog/data/html5s-canvas-2-pixel

Answer 4

GreatRash, here's how it works: defrance.by/tseny-prajs/podbor-zveta - color calculator. poke on the color and the image area is painted