Coloring Page Tool

Prompt

Code in html, css, and javascript a self-contained, complete and embeddable tool that can analyze the outlines in a photo, logo, or graphic and create a black and white line art coloring book page. Add a slider to adjust the line width of the line art. Carefully analyze the edges of the objects or people in the image to ensure a realistic likeness.

Iteration

Use the uploaded sample image as a guide, not as the original artwork. Now I don't see anything when I upload an image.

Iteration 2

That is not even close! The tool can only select about 4 lines from my photograph. This could not be successful coloring page. Double check the code and vastly improve the edge recognition of the photograph.

Iteration 3

Improving. Here is the current result and accompanying original file. You can see that the coloring page is still not well defined with coloring regions. The top of the head is not enclosed and the face is not clear and covered with speckles. Rework the code to create more defined and cleaner regions.

Iteration 4

Now for the heavy lift. Allow the user to download the coloring page, but add a Color Me button that adds a pencil and eraser tool that allows the user to add or remove lines, a paint brush tool that allows the user to paint like brush with variable width and opacity, a crayon tool with crayon texture, and a charcoal tool with charcoal texture. Include sliders to increase or decrease the amount of texture. Add a color picker that allows the user to select the color. Include an eyedropper tool to select previously used colors.

Iteration 5

Add an undo button and allow Control and Command Z. Make the line art permanent so that any coloring happens behind it and the black line sits on top so that the user cannot color over it. When coloring, show the actual size of the brush instead of just the crosshairs.