I will give a brief explanation. What I am going to do is to draw a shape exactly like the image from a PNG image without a background in a canvas. that the points with color change to another color and the points without background remain without background.

I think this method is a good resource to do this:
Pixel manipulation with canvas

An image for example:

Image map and area coordinate that may help:
485.5,165,485.5,166,484.5,167,484.5,168,483.5,169,483.5,170,483.5,171,482.5,172,482.5,173,481.5,174,481.5,175,480.5,176,480.5,177,479.5,178,479.5,179,478.5,180,478.5,181,477.5,182,477.5,183,476.5,184,476.5,185,475.5,186,472.5,187,472.5,188,472.5,189,471.5,190,471.5,191,471.5,192,471.5,193,471.5,194,471.5,195,470.5,196,470.5,197,469.5,198,469.5,199,468.5,200,467.5,201,468.5,202,468.5,203,468.5,204,470.5,205,471.5,206,472.5,207,473.5,208,473.5,209,473.5,210,473.5,211,472.5,212,472.5,213,472.5,214,472.5,215,472.5,216,472.5,217,472.5,218,472.5,219,472.5,220,472.5,221,472.5,222,471.5,223,471.5,224,471.5,225,471.5,226,471.5,227,472.5,228,472.5,229,472.5,230,471.5,231,471.5,232,470.5,233,470.5,234,470.5,235,470.5,236,470.5,237,470.5,238,470.5,239,470.5,240,470.5,241,468.5,242,468.5,243,468.5,244,468.5,245,468.5,246,468.5,247,468.5,248,468.5,249,470.5,250,470.5,251,470.5,252,470.5,253,470.5,254,470.5,255,470.5,256,470.5,257,470.5,258,470.5,259,470.5,260,471.5,261,493.5,262,493.5,263,493.5,264,493.5,265,493.5,266,493.5,267,493.5,268,494.5,269,495.5,270,496.5,271,501.5,272,504.5,272,522.5,271,523.5,270,524.5,269,525.5,268,526.5,267,526.5,266,544.5,265,546.5,264,547.5,263,547.5,262,548.5,261,550.5,260,552.5,259,553.5,258,558.5,257,559.5,256,560.5,255,560.5,254,560.5,253,560.5,252,560.5,251,560.5,250,560.5,249,560.5,248,560.5,247,560.5,246,560.5,245,560.5,244,560.5,243,560.5,242,560.5,241,561.5,240,563.5,239,564.5,238,566.5,237,567.5,236,568.5,235,568.5,234,568.5,233,568.5,232,569.5,231,569.5,230,569.5,229,569.5,228,569.5,227,569.5,226,570.5,225,570.5,224,570.5,223,568.5,222,567.5,221,565.5,220,564.5,219,563.5,218,561.5,217,560.5,216,558.5,215,557.5,214,559.5,213,559.5,212,559.5,211,559.5,210,558.5,209,557.5,208,556.5,207,555.5,206,554.5,205,553.5,204,552.5,203,551.5,202,549.5,201,548.5,200,547.5,199,546.5,198,545.5,197,544.5,196,543.5,195,542.5,194,541.5,193,539.5,192,538.5,191,536.5,190,532.5,189,530.5,188,529.5,187,528.5,186,527.5,185,526.5,184,524.5,183,523.5,182,519.5,181,518.5,180,515.5,179,514.5,178,509.5,177,507.5,176,505.5,175,505.5,174,505.5,173,504.5,172,502.5,171,501.5,170,499.5,169,498.5,168,496.5,167,494.5,166,489.5,165,485.5,165

And original image:

How can I do something like this?