javascript - Keep paint within image boundaries -

i building kid's paint application ipad. have made canvas has image and, using mouse event, 1 can color on it. however, not want color outside of boundaries of image. how possible?

my app code quite similar this sample code.

when understood correctly, want user unable destroy lineart of template image.

you place lineart image on html element (you use canvas, static img sufficient) , place 1 on canvas user draws on using css positioning. paint-canvas below seen through transparent parts of image above.

note input events caught upper object, not lower one.