javascript fill part of image on a canvas based on the gray level of the image

I am trying to fill parts of the image based on the shade tensity if an image in javascript, for example this image :

imagine each shade as a polygon, im trying to fill each region with a different pattern. here is where I have gone so far :

(demo)['https://jsfiddle.net/w1hrtk07/']

or link : https://jsfiddle.net/w1hrtk07/