Can't draw on top of img-touch-canvas

[fredericoschardong]

I can't draw on top of img-touch-canvas for some reason. Here is the code: http://pastebin.com/qbTV4Njj

Am I doing something wrong or is this a bug with img-touch-canvas?

[rombdn]

I think you can't draw atop of the canvas because there is already an animate/refresh function (animate) which I think will prevent (or conflict with) drawing on top of the canvas (https://github.com/rombdn/img-touch-canvas/blob/master/img-touch-canvas.js#L71).

(Beside that I think your code is problematic because you are defining a new setInterval each time a touchstart event happens. You should put that setInterval part outside of the event handler function and call it only once.)

A possible workaround could be to draw your particle in the animate function of ImgTouchCanvas :

• Put the function drawing the particle (in setInterval) here https://github.com/rombdn/img-touch-canvas/blob/master/img-touch-canvas.js#L78.
• replace context_me with this.context

change

var gesturableImg = new ImgTouchCanvas({
    canvas: document.getElementById('img_canvas'),
    path: imgURL
});

to

var gesturableImg = new ImgTouchCanvas({
    canvas: document.getElementById('img_canvas'),
    path: imgURL,
    particle: particle
});

(put the particle definition before that call)

• add this.particle = options.particle in ImgTouchCanvas constructor here https://github.com/rombdn/img-touch-canvas/blob/master/img-touch-canvas.js#L19
• replace particle with this.particle in animate

[fredericoschardong]

You are right, that setTimeout was in the wrong place.

I solved this in a more elegant way: creating a function that is called before calling requestAnimationFrame:

this.do_before_animate = options.do_before_animate; in line 24 this.do_before_animate(); before calling requestAnimationFrame

Thanks for your help!