I want to programmatically draw into a canvas.
I did it with some success, by storing drawing instructions in value[], defined as a 3-elements array. The first element value[0] is the drawing instruction , while value[1] and value[2] are the coordinates.
For example : value[0]="moveto" , value[1] = x , value[2] = y
another example : value[0] = "lineto", value[1] = x, value[2] = y.
In onDraw script, according to the stored values, different painting instructions are invoked. DrawingCanvas.json (3.2 KB)
When I draw directly in the canvas with the mouse, it works, but from time to time, in onDraw script, the ctx.moveTo() function (which should be called everytime a new touch event is created) appears to not execute. This is even worse when the draw messages are sent by OSC.
As drawing messages are stored in the value[] array, I suspect that new messages override old values, before they can be processed by onDraw script. Is there a way to bufferize the incoming messages, by defining a global array where messages are stored (like _2darray.push) in onTouch and onValue scripts, to be then read in onDraw script ?
Thanks
I'm trying to do something similar, based on this example (DrawingCanvas.json)
Looks like the queue is never cleared ; all drawing functions stored in queue are redrawn at every frame ; and the queue is growing indefinitely, consuming memory...
here is a modified example demonstrating this issue : DrawingCanvas(queue-issue).json (3.5 KB)
(I set stroke alpha to some very low value, and you can see that stroke is drawn over and over, increasing visible stroke alpha for every new value.)
at the end of the onDraw script, there is
locals.queue =
but it seems to never be called.
I don't understand why..
This queue is cleared, you can log its length after that line to verify it. The problem here is just that ctx.beingPath() is not called during the gesture, thus leaving the canvas internal queue uncleared. To make it work properly with transparent colors you'd need to take a slightly different approach and take the coordinates two by two in the queue and call ctx.beginPath() for each pair (of [x,y]) so that drawing instructions never get repeated.
)