I am trying to use the Canvas plugin to draw with a stylus on screen (actually, I don't have a tablet (yet), and am using the mouse). Trouble is, I can't get it to work. Using draw point, you get a jitterly set of points, dependent on the processing speed of the event loop rather than a smooth line. Using draw line is complex since when does the user start or end touch of the canvas -- at least I haven't figured it out yet.
Essentially I do: On Touch Canvas draw point Canvas.x, Canvas.y
Any suggestions would be much appreciated.
I need a way to smoothly and easily draw lines from one square to another. The squares are already drawn onto the Canvas.
p.s. BTW, I also tried the Plaster plugin, but using its quads to draw, I get the same jittery dots rather than a smooth line
Develop games in your browser. Powerful, performant & highly capable.
That's because that is the actual input results. However long ago they figured away to get a smooth effect. Take a large sample of positions say 30fps of samples. Then average the results and draw on every 30fps. This will create a much smooth drawing effect.
(looks like follow up question, didn't get posted, due to an internet disconnect).
How does one sample the location of input at 30 fps. I can see the each second event, which i could set at 1/30. But, how do i know where the current touch point is? Also any hints on how to average results would be great.
Hmm, i would both sample at 30fps and draw at 30fps -- perhaps drawing should be less, say at 3pfs.
onTouch canvas - begin path
isTouching canvas - draw path with color, line width
lineTo touch.x touch.y (if you got the canvas hotspot in the middle)
lineTo touch.x-canvas.x touch.y-canvas.y (if the hotspot is in the top left corner)
(looks my response wasn't posted again)
Many thank — It works great (smoothly)and performs very well.