The idea was to use wScratchPad.js jquery plugin for this game to make it up and run quick and easy. But after some efforts this idea was abandoned cause of problems to find a way to feed the x-y coords mechanism in the plugin (that is made for mouse navigation) with input from arrow key navigations which is a requirement..
So here we went into pure classical canvas and html5 technique and created at simple 10x10 px rect (the Mole) that with push around on the canvas with arrow keys (plus/minus: 10 px)..
This way this figure (=the Mole) leaves a track (a sort of "mole-tunnel") after itself as it is moved around. Cause we set the track to be transparent by the method:
ctx.globalCompositeOperation = 'destination-out';
we successively reveal what's underneath the upfront soil-image (scratch-front up) that covers the upper canvas (No 2.)..
The canvas (No.1) just lying next in the stack we use for the : Worm . figure that the Mole has to search for..
Finally the two canvas' are wrapped in a div (No 3) that is tied to the true original soil-background image..
We can stack the two canvas cause we use css z-index setting.
Player has a playtime opening capital worth in points that amounts to: 1700..