Mouse down or touch and stroke on canvas to reveal the image underneath. Uses Retina image detection in CSS & JavaScript with image-set and window.devicePixelRatio, image removal with globalCompositeOperation. Full explanatory article on my blog next week. Photographs by KingsdudeDave and davebloggs007
A Pen by Dudley Storey on CodePen.
This is awesome, well done!
You get a flash of the hidden image before the front image loads though. I found setting the
background-image
css property after you draw the front image is a quick-fix for that. There's probably a better way to do it though, maybe using twoImage
objects.