Storyboard Javascript Canvas API

The Storyboard canvas API provides an interface for clients to perform their own basic drawing operations into an in-memory buffer.

To access the drawing operations, a canvas render extension must be created first and given a unique name within the application. Once a canvas render extension is created, a Lua canvas object can be accessed using the sb.getCanvas call.

In this documentation, the object returned from the sb.getCanvas functions will be identified as a CANVAS object. Methods associated with the CANVAS object must be invoked using the Lua colon (:) notation, for example CANVAS:strokeRect.

The Lua canvas API is dependent on both the Lua plugin (libgre-plugin-lua) and the canvas render extension plugin (libgre-plugin-canvas).

📄️canvas.clearRect

Make transparent a rectangle defined by the bounding area of x1,y2 to x2,y2.

📄️canvas.drawImage

Draw an image within the canvas directed by the user-specified properties.

📄️canvas.drawText

Draw a string within the canvas directed by the user-specified properties.

📄️canvas.fill

Flood fill the entire canvas with a specific color.

📄️canvas.fillArc

Draw a filled arc defined by the center position (x,y), with x radius radiusx, y radius radiusy, start and end angles (start, end), rotation angle rotation, and with the color color. It fills the shape you get by connecting each end of the arc to the center of the ellipse with a straight line.

📄️canvas.fillCircle

Draw a filled circle defined by the center position (x,y), with radius radius, and with the color color.

📄️canvas.fillEllipse

Draw a filled ellipse defined by the center position (x,y), with x radius radiusx, y radius radiusy, rotation angle rotation, and with the color color.

📄️canvas.fillPoly

Fill the content of a polygon through the points defined in the xyarray with a specific color. The polygon must be a closed simple polygon. Alternatively, two arrays containing a series of points may be provided, as in {x1,x2,..}, {y1,y2,..} similar to sb.polyString.

📄️canvas.fillRect

Fill a rectangle defined by the bounding area of x1,y2 to x2,y2 with a specific color.

📄️canvas.setAlpha

Set the transparency level with which subsequent draw operations should be performed. The default value for alpha is 255 (fully opaque).

📄️canvas.setPixel

Set the pixel value at x, y to the specified color. This is equivalent

📄️canvas.strokeArc

Draw a stroked arc defined by the center position (x,y), with x radius radiusx, y radius radiusy, start and end angles (start,end), rotation angle rotation, and with the color color. It fills the shape you get by connecting each end of the arc to the center of the ellipse with a straight line.

📄️canvas.strokeCircle

Draw a stroked circle defined by the center position (x,y), with radius radius, and with the color color.

📄️canvas.strokeEllipse

Draw a stroked ellipse defined by the center position (x,y), with x radius radiusx, y radius radiusy, rotation angle rotation, and with the color color.

📄️canvas.strokePoly

Stroke a polygon through the points defined in xytable with a specific color. The width of the line is the last value passed to canvas.setLineWidth or 1 if no width has ever been specified.

📄️canvas.strokeRect

Stroke a rectangle outline defined by the bounding area of x1,y2 to x2,y2 with a specific color. The width of the outline is the last value set to canvas.lineWidth or 1 if no width has ever been specified.

📄️sb.getCanvas

Get a canvas object handle by name. The canvas object has the following