tl;dr
displaying a 2nd canvas element means user’s touch is lost – I don’t want user to have to touch screen again
I’m building an HTML5 Canvas game (the game displays a picture, slices it into puzzle pieces and then displays the pieces in a random order ready for the user to put the pieces back together again).
The source code (for my development branch) can be seen here:
https://github.com/Integralist/HTML5-Image-Slider-Game/tree/dragdrop
One key part of the game is that if the user clicks on a puzzle piece then that selected piece moves into any available space in the puzzle. If the user holds their click for more than a few milliseconds I assume they want to drag their selected puzzle piece instead of it automatically moving for them.
The way I do this, is by having another canvas sitting on top of the original canvas. This 2nd canvas is only ever used for the ‘drag and drop’ facility. The reason I went this route is that otherwise, while dragging my puzzle piece I would have needed to store the current puzzle state and then redraw it constantly – something I didn’t want to do for performance reasons.
What I’ve got so far works fine on mouse based computers because after I set up the piece to be dragged on the 2nd canvas I have a mousemove event which just fires and lets the user drag the piece around the canvas.
The problem I’m having is on touch devices, where because there is no mousemove event I’m using a touchmove event, but when I show the 2nd canvas and begin the drag process I have to touch the screen again to trigger the touchmove listener. As far as a user is concerned that is terrible because they have clicked and held their finger down on their device, but the 2nd canvas being displayed has caused that finger touch to lose focus and so they’ll be a bit disappointed that they now need to touch the screen again to start dragging.
I tried working around this by triggering a touchmove event manually but this didn’t work. If you download the code (see above) and try this on a touch device you’ll see what I mean. The puzzle piece suddenly jumps to the top left corner of the canvas for some reason? and also still requires me to touch the screen again for the touchmouse event to start triggering.
I’m really hoping this is just a minor issue and someone has a really clever work around for it.
Thanks in advance!
What about this strategy? Try always having the second transparent canvas on top of the bottom one. When a user touches/clicks down, they are doing so on the top canvas, not the bottom one, and you just immediately erase the piece from the bottom canvas and draw it into the top canvas, then let them continue to keep moving it around?