Programmatically drawing into canvas

(OpenStageControl beginner here :grinning:)

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 ?

The drawing function is not called directly, its being queued and executed asynchronously, which explains what you describe.

You could use a simple array stored in locals to queue drawing instructions:
DrawingCanvas.json (3.4 KB)

Fantastic ! Works perfectly, you saved me a lot of time.
Thanks !

Would it be possible to use the drawing canvas to draw automation inside the piano roll?

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..

help please !

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.

Thanks Jean-Emmanuel

that's it, of course !
so no issue here, just me who need a better understanding of the canvas API :slight_smile:



Well my example session was misleading !