HTML 5 Canvas jCanvas/KineticJS when image is draggable, canvas/stage is unresponsive for clicks/touch on an iPad

Question

I've tried this with both jCanvas and KineticJS. When an added image is made draggable:

var image = new Kinetic.Image({
  image: imageObj,
  id: imageName,
  x: parseInt(CoordX),
  y: parseInt(CoordY),
  draggable: true
});

The canvas/stage become unresponsive for clicks on an iPad. The only place where it recognises click/tap is on the border.

Has anyone faced similar issue and how did you resolve this?

all my images are draggable on an iPad 2, is this the first iPad you're talking about? — SoluableNonagon, Mar 26 '13 at 13:51

dave_k_smith · Answer 1 · 2013-03-26T16:58:55.830

UPDATE: @user1950497, for jCanvas, the key to making an image draggable is to make sure to set the layer property to true (http://jsfiddle.net/dksmiffs/YdPpy/):

$("canvas").drawImage({
  source: "http://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Gadsden_flag.svg/320px-Gadsden_flag.svg.png",
  x: 200, y: 150,
  layer: true,
  draggable: true
});

Thanks to @Caleb531 who guided me to the answer in jCanvas issue #74.

HTML 5 Canvas jCanvas/KineticJS when image is draggable, canvas/stage is unresponsive for clicks/touch on an iPad

1 Answers1