Global

Members

---

Canvas_Overview

Canvas overview

Canvas is a sophisticated palette of drawing and analysis capabilities to let you
both construct 2D images using vector and bitmap graphics but also to use
image processing to retrieve information.
Canvas is an RGBA pixel buffer you can load images, draw shapes, perform
per pixel and per kernel operations. This can be a buffer you create or one supplied
as part of a video stream or from an external library.

To use a canvas component, start by adding one to a page. Then you need to set its properties in the Editor.
the Canvas Component can be passed as a parameter to JavaScript actions. Code within an action can set properties and call methods on the Canvas Component.
You can choose to either have an image as your background or generate a color for the background and this will set the size of your Canvas Component.
The size of your canvas will either be the size of the image selected or the width/height properties depending on the options you choose.
In either case the size of the canvas background can affect later functions applied to your Canvas Component.
In the below example the size and position of the square can be affected by the size of the Canvas Component.
If your image or generated background has a width of 50 pixels but your Canvas Component has a width of 200 pixels then the canvas space and background is up-scaled to match.
A background of 50 pixels in a Canvas Component taking up 200 pixels on screen would mean the canvas space is being up-scaled by a factor of x4.
This means that all the values of the square you draw will be magnified by a scale of x4 as well. This will make your square appear 4 times as large.
The starting X position for drawing is also magnified. A value of 100 would end up as 400. This would appear well passed the end of the 200 width Canvas Component and may not be able to be seen.
In the other direction if you choose a very large image or set the generated size very large then your square will appear very small as everything is down-scaled.
For these reasons it is recommended when following the example code in this help document that you use canvas size of about 500x500 pixels.
The "stretch" resize property option can also affect the display of the square. If the canvas is stretched the square will strecth also and become a rectangle.
For other components you often want to deal with the width and height of the component. However most of the functions here don't care about the component size, they
only care about the canvas size which can be gotten from the properties pixelWidth and pixelHeight.

canvasCreateNew canvasCreateNew
canvasGetWidth canvasGetWidth
canvasGetHeight canvasGetHeight

Coordinates

All coordinates are (0,0) in the top left of the buffer. X increases to the
right and Y increases down the image towards the bottom. All angles are in
degrees clockwise.

Drawing

Drawing on an image_buffer has multiple styles. Vector and image processing.

Vector commands are built into a list of paths controlled with these methods:

canvasBeginPath canvasBeginPath
canvasClosePath canvasClosePath
canvasSmoothPath canvasSmoothPath turns lines into curves

Drawing commands are then added to the path using the following Add methods:

canvasAddMove canvasAddMove
canvasAddLine canvasAddLine
canvasAddBezier3 canvasAddBezier3
canvasAddBezier4 canvasAddBezier4
canvasAddEllipse canvasAddEllipse
canvasAddRoundedRect canvasAddRoundedRect
canvasAddWedge canvasAddWedge

Paths can be manipulated with the following transforms:

canvasResetTransform canvasResetTransform
canvasRotateTransform canvasRotateTransform
canvasSkewTransform canvasSkewTransform
canvasScaleTransform canvasScaleTransform
canvasTranslateTransform canvasTranslateTransform

The drawing commands are then rasterized using:

canvasDrawPathStroke canvasDrawPathStroke
canvasDrawPathFill canvasDrawPathFill

Brushes determine how strokes and fills are drawn. These commands update the brush:

canvasSetBrushMode canvasSetBrushMode
canvasSetBrushBlendMode canvasSetBrushBlendMode
canvasSetBrushColor canvasSetBrushColor
canvasSetBrushSource canvasSetBrushSource
canvasSetBrushPointSample canvasSetBrushPointSample
canvasSetBrushPosition canvasSetBrushPosition
canvasSetBrushAngle canvasSetBrushAngle
canvasSetBrushScale canvasSetBrushScale
canvasSetBrushSourceTopLeft canvasSetBrushSourceTopLeft
canvasSetBrushSourceBottomRight canvasSetBrushSourceBottomRight
canvasSetStrokeWidth canvasSetStrokeWidth
canvasSetStrokeCap canvasSetStrokeCap
canvasSetStrokeJoin canvasSetStrokeJoin
canvasSetStrokeInnerJoin canvasSetStrokeInnerJoin
canvasSetStrokeInnerMiterLimit canvasSetStrokeInnerMiterLimit
canvasSetStrokeMiterLimit canvasSetStrokeMiterLimit

Brushes can have gradients as follows:

canvasSetBrushGradientStart canvasSetBrushGradientStart
canvasSetBrushGradientEnd canvasSetBrushGradientEnd
canvasGradientClear canvasGradientClear
canvasGradientAddPoint canvasGradientAddPoint adds multi point gradients to the start and end

Strokes can have dashes added as follows:

canvasDashClear canvasDashClear
canvasDashAdd canvasDashAdd

Text makes it's own paths on the fly using:

canvasSetfontFilename canvasSetfontFilename
canvasSetfontHeight canvasSetfontHeight
canvasCalculateTextWidth canvasCalculateTextWidth
canvasDrawTextStroke canvasDrawTextStroke
canvasDrawTextFill canvasDrawTextFill

Full Canvas Operations

canvasCopyBuffer canvasCopyBuffer
canvasInvert canvasInvert
canvasRotate canvasRotate
canvasCrop canvasCrop
canvasResize canvasResize
canvasCalcPsnr canvasCalcPsnr
canvasFlipVertical canvasFlipVertical
canvasFlipHorizontal canvasFlipHorizontal
canvasAutoBrightnessContrast canvasAutoBrightnessContrast
canvasAutoColor canvasAutoColor
canvasChromaKey canvasChromaKey
canvasLighting canvasLighting
canvasHsv canvasHsv
canvasAdaptiveThreshold canvasAdaptiveThreshold
canvasBoxBlur canvasBoxBlur
canvasBoxBlurRegion canvasStampBoxBlur

Bitmap Operations

canvasStampBuffer canvasStampBuffer
canvasStampColorChannel canvasStampColorChannel
canvasStampLighting canvasStampLighting
canvasStampKernel canvasStampKernel
canvasStampMorphological canvasStampMorphological
canvasStampAdaptiveThreshold canvasStampAdaptiveThreshold
canvasStampHsv canvasStampHsv
canvasStampAutoColor canvasStampAutoColor
canvasStampAutoBrightnessContrast canvasStampAutoBrightnessContrast
canvasStampChromaKey canvasStampChromaKey
canvasStampMinmaxBlend canvasStampMinmaxBlend
canvasStampAvgDelta canvasStampAvgDelta
canvasStampCustom canvasStampCustom
canvasStampImage canvasStampImage
canvasStampImageCenter canvasStampImageCenter
canvasStampImageWarp canvasStampImageWarp
canvasStampImagePerspective canvasStampImagePerspective
canvasStampSvg canvasStampSvg
canvasPrepareSvg canvasPrepareSvg
canvasStampBarcode canvasStampBarcode
canvasStampQr canvasStampQr

Detectors

canvasReadQrcode canvasReadQrcode
canvasReadBarcode canvasReadBarcode
canvasReadAprilTags canvasReadAprilTags
canvasDetectSlidingTemplate canvasDetectSlidingTemplate
canvasDetectBlobs canvasDetectBlobs
canvasDetectSegments canvasDetectSegments

I/O functions

canvasGetPixel canvasGetPixel
canvasSetPixel canvasSetPixel
canvasSaveAs canvasSaveAs
canvasToTexture canvasToTexture

Methods

---

canvasAdaptiveThreshold(canvas, strength, radius, blend)

canvasAdaptiveThreshold thresholds with variable strength given a radius of local contrast. The blend 0-1 is how much of the image is preserved vs thresholded.
This applies a 0-1 threshold with an adaptive radius in pixels. The blend 0-1 is how much of the image is preserved vs thresholded.

Parameters:

Name	Type	Description
canvas	component	the target canvas
strength	real	-1 to 1 how strong the threshold is towards binary
radius	int	1 to 1000 how wide the radius to check for local contrast
blend	real	0 to 1 how much of the image is preserved vs thresholded (0.5 is a common value)

Example

registerAction('canvasAdaptiveThresholdTest', '', 'canvasAdaptiveThresholdTest', 'component:Canvas:canvas');
function canvasAdaptiveThresholdTest(canvas) {
    canvasAdaptiveThreshold(canvas, 0.2, 10, 0.5);
}

---

canvasAddBezier3(canvas, x1,y1, x2,y2, x3,y3)

canvasAddBezier3 Adds a parabolic Bezier curve (one control point) to the current path

Parameters:

Name	Type	Description
canvas	component	the target canvas.
x1,y1	real	start point.
x2,y2	real	control point.
x3,y3	real	end point.

Example

registerAction('canvasAddBezier3Test', '', 'canvasAddBezier3Test', 'component:Canvas:canvas');
function canvasAddBezier3Test(canvas) {
    setProperty(canvas, 'stroke_style', '#FF0000FF');
    setProperty(canvas, 'line_width', 4);
    canvasBeginPath(canvas);
    canvasAddMove(canvas, 150, 150);
    canvasAddBezier3(canvas, 150, 150, 175, 200, 150, 250);
    canvasDrawPathStroke(canvas);
}

---

canvasAddBezier4(canvas, x1,y1, x2,y2, x3,y3, x4,y4)

canvasAddBezier4 Adds a cubic Bezier curve (two control points) to the current path.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
x1,y1	real	start point.
x2,y2	real	control point 1.
x3,y3	real	control point 2.
x4,y4	real	end point.

Example

registerAction('canvasAddBezier4Test', '', 'canvasAddBezier4Test', 'component:Canvas:canvas');
function canvasAddBezier4Test(canvas) {
    setProperty(canvas, 'stroke_style', '#FF0000FF');
    setProperty(canvas, 'line_width', 4);
    canvasBeginPath(canvas);
    canvasAddMove(canvas, 150, 150);
    canvasAddBezier4(canvas, 150, 150, 175, 200, 180, 250, 140, 300);
    canvasDrawPathStroke(canvas);
}

---

canvasAddEllipse(canvas, x, y, rx,ry)

canvasAddEllipse an ellipse at the x/y position with radiuses rx,ry added to the path

Parameters:

Name	Type	Description
canvas	component	the target canvas.
x	real	ellipse position.
y	real	ellipse position.
rx,ry	real	x and y radiuses (a circle if the same).

Example

registerAction('canvasAddEllipseTest', '', 'canvasAddEllipseTest', 'component:Canvas:canvas');
function canvasAddEllipseTest(canvas) {
    setProperty(canvas, 'stroke_style', '#FF0000');
    setProperty(canvas, 'line_width', 4);
    canvasBeginPath(canvas);
    canvasAddEllipse(canvas,200, 200, 50, 200, 50);
    canvasDrawPathStroke(canvas);
}

---

canvasAddLine(canvas, x, y)

canvasAddLine a line from the current position to the new position on the current path. Note that this does not render immediately, it simply adds to the current path and displays when you draw the path.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
x	real	new position.
y	real	new position.

Example

registerAction('canvasAddLineTest', '', 'canvasAddLineTest', 'component:Canvas:canvas');
function canvasAddLineTest(canvas) {
    setProperty(canvas, 'stroke_style', '#FF0000');
    setProperty(canvas, 'line_width', 4);
    canvasBeginPath(canvas);
    canvasAddMove(canvas, 100, 100);
    canvasAddLine(canvas, 150, 100);
    canvasAddLine(canvas, 150, 150);
    canvasAddLine(canvas, 100, 150);
    canvasClosePath(canvas);
    canvasDrawPathStroke(canvas);
}

---

canvasAddMove(canvas, x, y)

canvasAddMove a move to a new position without drawing on a line. This does not have any immediate visual affect and simply sets up the position for where to start drawing the next command.
See canvasAddLine for example.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
x	real	new x position.
y	real	new y position.

---

canvasAddRoundedRect(canvas, x1,y1, x2,y2, radius)

canvasAddRoundedRect a rounded rectangle from x1/y1 to x2/y2 with curved corners of radius is added to the path

Parameters:

Name	Type	Description
canvas	component	the target canvas.
x1,y1	real	top left corner of the rectangle.
x2,y2	real	bottom right corner of the rectangle.
radius	real	curvature of the corners.

Example

registerAction('canvasAddRoundedRectTest', '', 'canvasAddRoundedRectTest', 'component:Canvas:canvas');
function canvasAddRoundedRectTest(canvas) {
    setProperty(canvas, 'stroke_style', '#FF0000');
    setProperty(canvas, 'line_width', 4);
    canvasBeginPath(canvas);
    canvasAddRoundedRect(canvas, 200, 200, 100, 100, 20);
    canvasDrawPathStroke(canvas);
}

---

canvasAddWedge(canvas, x, y, rx,ry, a1,a2, thickness_ratio)

canvasAddWedge a part of an ellipse with an inner and outer radius and starting and ending angle in degrees is added to the path

Parameters:

Name	Type	Description
canvas	component	the target canvas.
x	real	center of the wedge.
y	real	center of the wedge.
rx,ry	real	x and y radiuses (a circle if the same).
a1,a2	real	starting and ending angle in degrees.
thickness_ratio	real	0 is no thickness (just follows the circumference), 1 is a wedge right to the center of the ellipse, 0.5 is halfway.

Example

registerAction('canvasAddWedgeTest', '', 'canvasAddWedgeTest', 'component:Canvas:canvas');
function canvasAddWedgeTest(canvas) {
    setProperty(canvas, 'stroke_style', '#FF0000');
    setProperty(canvas, 'line_width', 4);
    canvasBeginPath(canvas);
    canvasAddWedge(canvas, 350, 350, 100, 100, 0, 90, 5); //degrees
    canvasDrawPathStroke(canvas);
}

---

canvasAutoBrightnessContrast(canvas)

canvasAutoBrightnessContrast Automatically calculate and apply the maximum brightness and contrast

Parameters:

Name	Type	Description
canvas	component	the target canvas.

Example

registerAction('canvasAutoBrightnessContrastTest', '', 'canvasAutoBrightnessContrastTest', 'component:Canvas:canvas');
function canvasAutoBrightnessContrastTest(canvas) {
    canvasAutoBrightnessContrast(canvas);
}

---

canvasAutoColor(canvas)

canvasAutoBrightnessContrast Automatically calculate and apply strong color saturation/balance

Parameters:

Name	Type	Description
canvas	component	the target canvas.

Example

registerAction('canvasAutoColorTest', '', 'canvasAutoColorTest', 'component:Canvas:canvas');
function canvasAutoColorTest(canvas) {
    canvasAutoColor(canvas);
}

---

canvasBeginPath(canvas)

canvasBeginPath clears out the path buffer ready to add new commands. This does not have any immediate visual affect on its own. It is just used to prepare before other instructions.
See stroke for example.

Parameters:

Name	Type	Description
canvas	component	the target canvas.

---

canvasBoxBlur(canvas, radius)

canvasBoxBlur blurs the canvas

Parameters:

Name	Type	Description
canvas	component	the target canvas.
radius	int	radius of the blur in pixels.

Example

registerAction('canvasBoxBlurTest', '', 'canvasBoxBlurTest', 'component:Canvas:canvas');
function canvasBoxBlurTest(canvas) {
    canvasBoxBlur(canvas, 30);
}

---

canvasBoxBlurRegion(canvas, x, y, w,-, h, radius)

canvasBoxBlurRegion blurs a region on the canvas

Parameters:

Name	Type	Description
canvas	component	the target canvas.
x	int	top left corner of the region.
y	int	top left corner of the region.
w,-	int	width of the region.
h	int	height of the region.
radius	int	radius of the blur in pixels.

Example

registerAction('canvasBoxBlurRegionTest', '', 'canvasBoxBlurRegionTest', 'component:Canvas:canvas');
function canvasBoxBlurRegionTest(canvas) {
    canvasBoxBlurRegion(canvas, 100, 100, 400, 400, 30);
}

---

canvasCalcPsnr(canvas, othercanvas)

canvasCalcPsnr Returns the calculated peak signal to noise ratio comparing
an input canvas to another canvas.
The higher the returned value the more alike the images are. A typical value for
comparisons for lossy images are between 30 and 50 dB, where higher is better.
When the two images are identical, the resultant psnr will be infinity.
See http://en.wikipedia.org/wiki/Peak_signal-to-noise_ratio

Parameters:

Name	Type	Description
canvas	component	the target canvas.
othercanvas	component	the comparison canvas.

Example

registerAction('canvasCalcPsnrTest', '', 'canvasCalcPsnrTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasCalcPsnrTest(canvas, canvas2) {
    var result = canvasCalcPsnr(canvas, canvas2);
    print('psnr = ',result);
}

---

canvasCalculateTextWidth(canvas, text)

canvasCalculateTextWidth the specified text width is calculated without rendering

Parameters:

Name	Type	Description
canvas	component	the target canvas.
text	string	the text to render.

Returns:

width - the width of the text if it was rendered.

Type

real

Example

registerAction('canvasCalculateTextWidthTest', '', 'canvasCalculateTextWidthTest', 'component:Canvas:canvas');
function canvasCalculateTextWidthTest(canvas) {
    setProperty(canvas, 'stroke_style', '#FF0000FF');
    setProperty(canvas, 'font', '40px vera');
    setProperty(canvas, 'line_width', 2);
    var width = canvasCalculateTextWidth(canvas, 'Hello World');
    print('Text width = ',width);
}

---

canvasChromaKey(canvas, hue, hue_mask, luminance_mask, mask_shadow, mask_light)

canvasChromaKey removes (known as a key) a specific color (or chroma). This function uses the HSV transform to calculate the hue (tint),
saturation (amount of tint) and value (brightness) - this allows us to control how much of the highlights and shadows are preserved when
a colored background is removed.

Parameters:

Name	Type	Description
canvas	component	the target canvas
hue	real	the color converted to hue (hsv) from 0 to 360, 0 red, 90 green, 180 blue
hue_mask	real	the hue tollerance to generate the mask, 0 to 1, 0.1 or 0.06 are good values
luminance_mask	real	the amount of luminance tollerance, 0 to 5, 1.5 is a good value
mask_shadow	real	the amount of shadow preserved, 0 to 5, 2.6 is a good value, smaller means less shadow is added
mask_light	real	the amount of saturated color preserved, 0 to 5, 0.9 is a good value, more means more highlights may be picked up

Example

registerAction('canvasChromaKeyTest', '', 'canvasChromaKeyTest', 'component:Canvas:canvas');
function canvasChromaKeyTest(canvas) {
    canvasChromaKey(canvas, 90, 0.06, 1.5, 2.6, 0.9);
}

---

canvasClosePath(canvas)

canvasClosePath will draw the final line from your current position back to the start. This is a shortcut instead of doing a lineTo() and having to put in the correct numbers.
See canvasAddLine for example.

Parameters:

Name	Type	Description
canvas	component	the target canvas.

---

canvasCopyBuffer(canvas, canvas_src)

canvasCopyBuffer This is a high speed copy from one buffer to another, often used to reset a buffer during redraw operations
See canvasStampBuffer for a code example.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
canvas_src	component	the source canvas.

---

canvasCreateNew(filename, width, height, color)

canvasCreateNew refreshes the canvas with a new image buffer. This resets the canvas removing any previous drawing on the canvas.

Parameters:

Name	Type	Description
filename	string	optional image, png, jpg, bmp or svg.
width	int	default width (used for svg or if no filename).
height	int	default height (used for svg or if no filename).
color	color	default color (used for svg or if no filename).

Returns:

width,height - the size of buffer allocated.

Type

json

Example

registerAction('canvasCreateNewTest', '', 'canvasCreateNewTest', '');
function canvasCreateNewTest() {
    //This creates a new canvas with a red background
    var canvas = findComponent('Page 21', 'canvas', 'Canvas 1');
    canvasCreateNew(canvas,'',1920,1080,'0xFF0000FF');
    //This creates a new canvas with an image
    var sz = canvasCreateNew(canvas,'button_01_default_9.png',0,0,'');
    sz = JSON.parse(sz);
    print(sz);
}

---

canvasCrop(canvas, x, y, w, h)

canvasCrop will cut out the image at the specified size and location. The image of the canvas background then becomes this cutout.
The cropped image follows the same resize rules as the original (fit, fill, stretch).
This example will cut out a sqaure from your image starting at position (100,100) that is 200x200 pixels big.
This square becomes the new image background and will fill the canvas area.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
x	int	the x position for the top left of where to crop.
y	int	the y position for the top left of where to crop.
w	int	the width of the area to be cropped.
h	int	the height of the area to be cropped.

Example

registerAction('canvasCropTest', '', 'canvasCropTest', 'component:Canvas:canvas');
function canvasCropTest(canvas) {
    canvasCrop(canvas, 100, 100,200,200);
}

---

canvasDashAdd(canvas, on_length, off_length)

canvasDashAdd adds a dash on length and a dash off length which can be chained together to create patterns for stroke operations like canvasDrawTextStroke and canvasDrawPathStroke
Look at canvasDashClear for example code.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
on_length	real	length of dash in pixels.
off_length	real	length of the gap in pixels.

---

canvasDashClear(canvas)

canvasDashClear clears any dashes for stroke operations like canvasDrawTextStroke and canvasDrawPathStroke

Parameters:

Name	Type	Description
canvas	component	the target canvas.

Example

registerAction('canvasDashClearTest', '', 'canvasDashClearTest', 'component:Canvas:canvas');
function canvasDashClearTest(canvas) {
    canvasBeginPath(canvas);
    setProperty(canvas, 'line_width', 4);
    canvasSetBrushColor(canvas, '0xFF0000FF');
    canvasAddMove(canvas, 100, 100);
    canvasAddLine(canvas, 250, 100);
    canvasAddLine(canvas, 250, 250);
    canvasAddLine(canvas, 100, 250);
    canvasClosePath(canvas);
    canvasDashAdd(canvas, 5, 15);
    canvasDrawPathStroke(canvas);
    
    canvasBeginPath(canvas);
    canvasDashClear(canvas);
    canvasAddMove(canvas, 100, 300);
    canvasAddLine(canvas, 250, 300);
    canvasAddLine(canvas, 250, 450);
    canvasAddLine(canvas, 100, 450);
    canvasClosePath(canvas);
    canvasDrawPathStroke(canvas);
}

---

canvasDetectBlobs(canvas, r_similarity,g_similarity,b_similarity, blob_min_width, blob_min_size, visualise)

canvasDetectBlobs looks for pixel connected blobs which match a specific color

Parameters:

Name	Type	Description
canvas	component	the target canvas.
r_similarity,g_similarity,b_similarity	int	from 0 to 255 the 8 bit range (0 is an exact match, 255 matches all).
blob_min_width	int	the minium pixel width to be considered a blob (2 or higher).
blob_min_size	int	the minimum pixel count to be considered a blob (4 or higher).
visualise	int	if true lets you see the matches on the source canvas.

Returns:

blobs - for each blob the x,y,total is recorded

Type

json

Example

var blobs = img_src.canvasDetectBlobs(canvas,0xFFFFFF,10,10,10,3,10,0)
blobs = JSON.parse(blobs)
for(var i = 0; i < blobs.length; i++) {
    var obj = blobs[i]
    var blobs_x = obj.x
    var blobs_y = obj.y
    var blobs_pixel_cnt = obj.total
}

---

canvasDetectSegments(canvas, dst_canvas, num_elements, compactness, visualise)

canvasDetectSegments looks for pixel with a similar color and create (SNIC) superpixels into a result canvas with a unique color for each superpixel

Parameters:

Name	Type	Description
canvas	component	the target canvas.
dst_canvas	component	the canvas to hold the result.
num_elements	int	the number of superpixels (2 or higher).
compactness	real	0 to 100, the super pixels tendancy to circularity (10 is a common value).
visualise	int	if true lets you see the segments on the source canvas.

Example

registerAction('canvasDetectSegmentsTest', '', 'canvasDetectSegmentsTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasDetectSegmentsTest(canvas, canvas2) {
    canvasDetectSegments(canvas, canvas2, 200, 10, 1);
}

---

canvasDetectSlidingTemplate(canvas, canvas_template, template_x_count, x, y, slidex,slidey, slide_step)

canvasDetectSlidingTemplate slides a template over the canvas returning the best matching value and position for each template

Parameters:

Name	Type	Description
canvas	component	the target canvas.
canvas_template	component	the template canvas.
template_x_count	int	the canvas_template can have one or more templates left to right, they must all be the same width.
x	int	the x coordinate for the spot on the canvas to match the templates against.
y	int	the y coordinate for the spot on the canvas to match the templates against.
slidex,slidey	int	the number of pixels to slide in x and y to test the templates.
slide_step	int	by default 1 pixel, but can step in 2,3 or more pixel increments.

Returns:

template_matches - for each template the diff,x,y where the difference is the best match and x,y is the template position

Type

json

Example

var templates = img_src.canvasDetectSlidingTemplate(canvas,template,10,100,100,3,3,1)
templates = JSON.parse(templates)
for(var i = 0; i < templates.length; i++) {
    var obj = templates[i]
    var difference = obj.dif
    var match_x = obj.x
    var match_y = obj.y
}

---

canvasDrawPathFill(canvas)

canvasDrawPathFill the current path is drawn with the current brush in fill mode (fill in the middle)

Parameters:

Name	Type	Description
canvas	component	the target canvas.

Example

registerAction('canvasDrawPathFillTest', '', 'canvasDrawPathFillTest', 'component:Canvas:canvas');
function canvasDrawPathFillTest(canvas) {
    setProperty(canvas, 'fill_style', '#FF0000FF');
    canvasBeginPath(canvas);
    canvasAddRoundedRect(canvas, 200, 200, 100, 100, 20);
    canvasDrawPathFill(canvas);
}

---

canvasDrawPathStroke(canvas)

canvasDrawPathStroke the current path is stroked with the current brush (draw the outside)

Parameters:

Name	Type	Description
canvas	component	the target canvas.

Example

registerAction('canvasDrawPathStrokeTest', '', 'canvasDrawPathStrokeTest', 'component:Canvas:canvas');
function canvasDrawPathStrokeTest(canvas) {
    setProperty(canvas, 'stroke_style', '#FF0000FF');
    setProperty(canvas, 'line_width', 20);
    
    //draw basic triangle with sharp corners
    canvasBeginPath(canvas);
    canvasAddMove(canvas, 100, 100);
    canvasAddLine(canvas, 250, 100);
    canvasAddLine(canvas, 100, 150);
    canvasClosePath(canvas);
    canvasDrawPathStroke(canvas);
    
    //draw triangle with curved corners
    canvasSetStrokeCap(canvas, 2); //the cap type 0 ButtCap, 1 SquareCap, 2 RoundCap
    canvasSetStrokeJoin(canvas, 2); //the join type 0 MiterJoin, 1 MiterJoinRevert, 2 RoundJoin, 3 BevelJoin, 4 MiterJoinRound
    canvasSetStrokeInnerJoin(canvas, 2);
    canvasSetStrokeInnerMiterLimit(canvas, 4);
    canvasSetStrokeMiterLimit(canvas, 4);
    canvasBeginPath(canvas);
    canvasAddMove(canvas, 100, 300);
    canvasAddLine(canvas, 250, 300);
    canvasAddLine(canvas, 100, 350);
    canvasClosePath(canvas);
    canvasDrawPathStroke(canvas);
    
    //draw triangle with flat corners
    canvasSetStrokeCap(canvas, 1); //the cap type 0 ButtCap, 1 SquareCap, 2 RoundCap
    canvasSetStrokeJoin(canvas, 3); //the join type 0 MiterJoin, 1 MiterJoinRevert, 2 RoundJoin, 3 BevelJoin, 4 MiterJoinRound
    canvasSetStrokeInnerJoin(canvas, 3);
    canvasSetStrokeInnerMiterLimit(canvas, 4);
    canvasSetStrokeMiterLimit(canvas, 4);
    canvasBeginPath(canvas);
    canvasAddMove(canvas, 100, 500);
    canvasAddLine(canvas, 250, 500);
    canvasAddLine(canvas, 100, 550);
    canvasClosePath(canvas);
    canvasDrawPathStroke(canvas);
}

---

canvasDrawTextFill(canvas, text, x, y, width)

canvasDrawTextFill the specified text is drawn with the current brush in fill mode (fill in the middle)

Parameters:

Name	Type	Description
canvas	component	the target canvas.
text	string	the text to render.
x	real	the position of the top left corner.
y	real	the position of the top left corner.
width	real	the maximum width for the text to render into.

Example

registerAction('canvasDrawTextFillTest', '', 'canvasDrawTextFillTest', 'component:Canvas:canvas');
function canvasDrawTextFillTest(canvas) {
    setProperty(canvas, 'fill_style', '#FF0000FF');
    setProperty(canvas, 'font', '40px vera');
    canvasDrawTextFill(canvas, 'Hello World', 100, 100, 1000);
}

---

canvasDrawTextStroke(canvas, text, x, y, width)

canvasDrawTextStroke the specified text is stroked with the current brush (draw the outside)

Parameters:

Name	Type	Description
canvas	component	the target canvas.
text	string	the text to render.
x	real	the position of the top left corner.
y	real	the position of the top left corner.
width	real	the maximum width for the text to render into.

Example

registerAction('canvasDrawTextStrokeTest', '', 'canvasDrawTextStrokeTest', 'component:Canvas:canvas');
function canvasDrawTextStrokeTest(canvas) {
    setProperty(canvas, 'stroke_style', '#FF0000FF');
    setProperty(canvas, 'font', '40px vera');
    setProperty(canvas, 'line_width', 2);
    canvasDrawTextStroke(canvas, 'Hello World', 100, 100, 1000);
}

---

canvasFlipHorizontal(canvas)

canvasFlipHorizontal flip the target canvas horizontally.

Parameters:

Name	Type	Description
canvas	component	the target canvas.

Example

registerAction('canvasFlipHorizontalTest', '', 'canvasFlipHorizontalTest', 'component:Canvas:canvas');
function canvasFlipHorizontalTest(canvas) {
    canvasFlipHorizontal(canvas);
}

---

canvasFlipVertical(canvas)

canvasFlipVertical flips the target canvas vertically.

Parameters:

Name	Type	Description
canvas	component	the target canvas.

Example

registerAction('canvasFlipVerticalTest', '', 'canvasFlipVerticalTest', 'component:Canvas:canvas');
function canvasFlipVerticalTest(canvas) {
    canvasFlipVertical(canvas);
}

---

canvasGetHeight(canvas)

canvasGetHeight returns the canvas height. This is not the size of the component but the number of pixels the actual canvas was set to either from the background image or size specified.

Parameters:

Name	Type	Description
canvas	component	target canvas.

Returns:

height - the canvas height.

Type

int

Example

registerAction('canvasGetHeightTest', '', 'canvasGetHeightTest', 'component:Canvas:canvas');
function canvasGetHeightTest(canvas) {
    var Height = canvasGetHeight(canvas);
    print('Height = ',Height);
}

---

canvasGetPixel(canvas, x, y)

canvasGetPixel returns the RGBA color value of th pixel at the given coordinates on the canvas. Out of bounds requests return the color transparent black.

Parameters:

Name	Type	Description
canvas	component	the canvas to read from.
x	int	pixel x position.
y	int	pixel y position.

Example

registerAction('canvasGetPixelTest', '', 'canvasGetPixelTest', 'component:Canvas:canvas');
function canvasGetPixelTest(canvas) {
    var pixelColor = canvasGetPixel(canvas, 250, 250);
    print('pixelColor = ',pixelColor);
}

---

canvasGetPixelData(canvas)

canvasGetPixelData Retrieves all the binary pixel data in the canvas
To understand this data you will also need to look at width, height, pixel_stride and pixel_format properties

Parameters:

Name	Type	Description
canvas	component	the canvas

Example

registerAction('canvasGetPixelDataTest', '', 'canvasGetPixelDataTest', 'component:Canvas:canvas');
function canvasGetPixelDataTest(canvas) {
    var ArrayBuffer = canvasGetPixelData(canvas);
    var myDataView = new DataView(ArrayBuffer);
    myDataView.setInt16(0, 256, true);
    // Int16Array uses the platform's endianness.
    var dataArray = new Int16Array(ArrayBuffer)
    var isLittleEndian = dataArray[0] === 256;
    print('isLittleEndian = ',isLittleEndian);
    for(var i = 0; i < 20; i++) {
        var test = myDataView.getUint8(i);
        print('test = ',test);
    }
}

---

canvasGetWidth(canvas)

canvasGetWidth returns the canvas width. This is not the size of the component but the number of pixels the actual canvas was set to either from the background image or size specified.

Parameters:

Name	Type	Description
canvas	component	target canvas.

Returns:

width - the canvas width.

Type

int

Example

registerAction('canvasGetWidthTest', '', 'canvasGetWidthTest', 'component:Canvas:canvas');
function canvasGetWidthTest(canvas) {
    var width = canvasGetWidth(canvas);
    print('Width = ',width);
}

---

canvasGradientAddPoint(canvas, color, position)

canvasGradientAddPoint adds a color point at a position from 1-254. The multi point gradient starts with canvasSetBrushGradientStart, then any point gradients, then ends with canvasSetBrushGradientEnd. This gradient is used for brush operations like canvasDrawPathFill and canvasDrawPathStroke
See canvasGradientClear for a code example.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
color	color	the color point to add.
position	int	from 1 to 254 (e.g. 128 will be a middle color between the start and end colors).

---

canvasGradientClear(canvas)

canvasGradientClear clears any point gradients for brush operations like canvasDrawPathFill and canvasDrawPathStroke
This clears away your gradient settings such as colors but does not stop it being in gradient mode. You must use canvasSetBrushMode to set it back to 0 to return to a normal non-gradient mode.

Parameters:

Name	Type	Description
canvas	component	the target canvas

Example

registerAction('canvasGradientClearTest', '', 'canvasGradientClearTest', 'component:Canvas:canvas');
function canvasGradientClearTest(canvas) {
    canvasBeginPath(canvas);
    canvasSetBrushPosition(canvas,0,0)
    canvasSetBrushGradientStart(canvas, '0x0000FFFF'); //center colour of the diamond gradient
    canvasSetBrushGradientEnd(canvas, '0x00FF00FF'); //outer colour of the diamond gradient
    canvasGradientAddPoint(canvas, '0xFF0000FF', 400);
    canvasSetBrushMode(canvas, 3); //look at the BrushMode property for more gradient options.
    canvasAddMove(canvas, 0, 100);
    canvasAddLine(canvas, 1000, 100);
    canvasAddLine(canvas, 1000, 250);
    canvasAddLine(canvas, 0, 250);
    canvasClosePath(canvas);
    canvasDrawPathFill(canvas);
    
    //This is setting the size of the rectangle to the size of the canvas
    canvasGradientClear(canvas);
    canvasBeginPath(canvas);
    canvasAddMove(canvas, 0, 300);
    canvasAddLine(canvas, 1000, 300);
    canvasAddLine(canvas, 1000, 450);
    canvasAddLine(canvas, 0, 450);
    canvasClosePath(canvas);
    canvasDrawPathFill(canvas);
    
    //reset mode back to default for future operations
    canvasSetBrushMode(canvas, 0); 
}

---

canvasHsv(canvas, hue, saturation, value)

canvasHsv Adjusts the canvas with an HSV transform. HSV provides control over the hue (tint),
saturation (amount of tint) and value (brightness) giving control of the amount of color in the image

Parameters:

Name	Type	Description
canvas	component	the target canvas
hue	real	0 no change, (-180 to 180), each 90 plus and minus is a change in RGB hue
saturation	real	0 no change, (-1 to 1) -1 = desaturated, 1 = saturated
value	real	0 no change, (-1 to 1) -1 = dark, 1 = bright

Example

registerAction('canvasHsvTest', '', 'canvasHsvTest', 'component:Canvas:canvas');
function canvasHsvTest(canvas) {
    canvasHsv(canvas, 90, 0.5, 0.5);
}

---

canvasInvert(canvas)

canvasInvert inverts the colors in the canvas.

Parameters:

Name	Type	Description
canvas	component	the canvas to invert.

Example

registerAction('canvasInvertTest', '', 'canvasInvertTest', 'component:Canvas:canvas');
function canvasInvertTest(canvas) {
    canvasInvert(canvas);
}

---

canvasLighting(canvas, brightness, contrast, shadow, fill, highlight, temperature)

canvasLighting apply lighting to the canvas

Parameters:

Name	Type	Description
canvas	component	the target canvas
brightness	real	(-1 to 1) -1 = black, 0 = unmodified, 1 = white
contrast	real	(-1 to 1) -1 = no contrast / grey, 0 = unmodified, 1 = high contrast
shadow	real	(-1 to 1) -1 = shadow reduced, 0 = unmodified, 1 = shadow increased
fill	real	(-1 to 1) -1 = fill light reduced, 0 = unmodified, 1 = fill light increased
highlight	real	(-1 to 1) -1 = highlights reduced / grey, 0 = unmodified, 1 = highlights increased
temperature	real	(-1 to 1) -1 = warm / red, 0 = unmodified, 1 = cool / blue

Example

registerAction('canvasLightingTest', '', 'canvasLightingTest', 'component:Canvas:canvas');
function canvasLightingTest(canvas) {
    canvasLighting(canvas, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5);
}

---

canvasPrepareSvg(canvas, filename, svgdata)

canvasPrepareSvg preload an SVG ready to be stamped onto the canvas canvasStampSvg. This has no immediate visual effect and is just a preparation but will display once you stamp it onto the canvas.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
filename	string	the svg file from the images folder.
svgdata	string	an alternative svg string to render.

Returns:

dimensions -JSON data of the top left and bottom right coordinates of the svg prepared.

Type

string

Example

registerAction('canvasPrepareSvgTest', '', 'canvasPrepareSvgTest', 'component:Canvas:canvas');
function canvasPrepareSvgTest(canvas) {
    canvasPrepareSvg(canvas, 'soccerbelgium.svg', '');
}

---

canvasReadAprilTags(canvas)

canvasReadAprilTags scans the canvas for april tags and tries to read in their data.

Parameters:

Name	Type	Description
canvas	component	the target canvas.

Returns:

tagslist - id,margin,x,y,tl,tr,br,bl (The tag ID, the accuracy margin, the x/y center, the TopLeft, TopRight, BottomRight and BottomLeft corners of the tag)

Type

json

Example

registerAction('canvasReadAprilTagsTest', '', 'canvasReadAprilTagsTest', 'component:Canvas:canvas');
function canvasReadAprilTagsTest(canvas) {
    setProperty(canvas, 'font', '40px vera');
    var tags = canvasReadAprilTags(canvas);
    tags = JSON.parse(tags);
    print('!m1 tags = ',tags);
    setProperty(canvas, 'stroke_style', '#FF0000');
    setProperty(canvas, 'line_width', 4);
    for(var i = 0; i < tags.length; i++) {
        var obj = tags[i];
        canvasBeginPath(canvas);
        canvasAddMove(canvas, obj.tl_x, obj.tl_y);
        canvasAddLine(canvas, obj.tr_x, obj.tr_y);
        canvasAddLine(canvas, obj.br_x, obj.br_y);
        canvasAddLine(canvas, obj.bl_x, obj.bl_y);
        canvasAddLine(canvas, obj.tl_x, obj.tl_y);
        canvasDrawPathStroke(canvas);
        canvasDrawTextFill(canvas, obj.id, obj.x, obj.y-50, 1000);
    }
}

---

canvasReadBarcode(canvas)

canvasReadBarcode scans the canvas for a barcode and attempts to read in the data if it finds one.

Parameters:

Name	Type	Description
canvas	canvas	target canvas.

Returns:

code - the data encoded in the barcode.

Type

string

Example

registerAction('canvasReadBarcodeTest', '', 'canvasReadBarcodeTest', 'component:Canvas:canvas');
function canvasReadBarcodeTest(canvas) {
    var data = canvasReadBarcode(canvas);
    print('data = ',data,'  len = ',data.length);
}

---

canvasReadQrcode(canvas)

canvasReadQrcode reads a potential QR code on the canvas

Parameters:

Name	Type	Description
canvas	canvas	target canvas.

Returns:

code - the data encoded.

Type

string

Example

registerAction('canvasReadQrcodeTest', '', 'canvasReadQrcodeTest', 'component:Canvas:canvas');
function canvasReadQrcodeTest(canvas) {
    var data = canvasReadQrcode(canvas);
    print('data = ',data,'  len = ',data.length);
}

---

canvasResetColor(canvas, color)

canvasResetColor quickly updates the whole canvas to the specified color

Parameters:

Name	Type	Description
canvas	component	the target canvas.
color	color	the color to apply to the canvas.

Example

registerAction('canvasResetColorTest', '', 'canvasResetColorTest', 'component:Canvas:canvas');
function canvasResetColorTest(canvas) {
    canvasResetColor(canvas, '0x448844FF');
}

---

canvasResetTransform(canvas)

canvasResetTransform updates the transform back to it's default value (unity). Look at canvasRotateTransform for example code using this.

Parameters:

Name	Type	Description
canvas	component	the target canvas.

---

canvasResize(canvas, w, h, horz_filter, vert_filter)

canvasResize Resizes the canvas which will also recreate the canvas clearing away anything that had been drawn to the canvas.
This resizes the actual canvas itself affecting the number of pixels available. This means if you resize to be a lot
smaller the display will be the same size but the image will be blury as the canvas stretches to fit the component.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
w	int	the width to resize to.
h	int	the height to resize to.
horz_filter	int	0 nearest, 1 linear, 2 avg, 3 lanzcos.
vert_filter	int	0 nearest, 1 linear, 2 avg, 3 lanzcos.

Example

registerAction('canvasResizeTest', '', 'canvasResizeTest', 'component:Canvas:canvas');
function canvasResizeTest(canvas) {
    canvasResize(canvas, 100, 100, 0, 0);
}

---

canvasRotate(canvas, mode)

canvasRotate Rotates the canvas in 90 degree increments. This operation is additive. Calling it twice with mode 1 with result in a total of 180 degree rotation.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
mode	int	Rotates the canvas by a given angle (0 = no rotate, 1 = 90 degrees, 2 = 180, 3 = 270).

Example

registerAction('canvasRotateTest', '', 'canvasRotateTest', 'component:Canvas:canvas');
function canvasRotateTest(canvas) {
    canvasRotate(canvas, 1); //1 means 90 degrees
}

---

canvasRotateTransform(canvas, angle)

canvasRotateTransform updates the transform rotation for the current path - this will be applied during canvasDrawPathFill or canvasDrawPathStroke

Parameters:

Name	Type	Description
canvas	component	the target canvas.
angle	string	the angle in degrees to rotate.

Example

registerAction('canvasRotateTransformTest', '', 'canvasRotateTransformTest', 'component:Canvas:canvas');
function canvasRotateTransformTest(canvas) {
    //draw normal shape
    setProperty(canvas, 'stroke_style', '#FF0000FF');
    setProperty(canvas, 'line_width', 4);
    canvasBeginPath(canvas);
    canvasAddRoundedRect(canvas, 200, 100, 100, 100, 20);
    canvasDrawPathStroke(canvas);
    //draw rotated shape
    setProperty(canvas, 'stroke_style', '#FF0000FF');
    setProperty(canvas, 'line_width', 4);
    canvasBeginPath(canvas);
    canvasRotateTransform(canvas, 45); //applies rotation in degrees
    canvasAddRoundedRect(canvas, 200, 100, 100, 100, 20);
    canvasDrawPathStroke(canvas);
    canvasResetTransform(canvas); //removes the transform rotate for future operations.
}

---

canvasSaveAs(canvas, filename, quality)

canvasSaveAs saves a render of the canvas as an image to storage.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
filename	string	the path and filename with extension .png or .jpg.
quality	real	the jpeg or png compression ratio from 0-1.

Example

registerAction('canvasSaveAsTest', '', 'canvasSaveAsTest', 'component:Canvas:canvas');
function canvasSaveAsTest(canvas) {
    canvasSaveAs(canvas, 'test.png', 0.9);
}

---

canvasScaleTransform(canvas, sx,sy)

canvasScaleTransform updates the transform scale for the current path - this will be applied during canvasDrawPathFill or canvasDrawPathStroke

Parameters:

Name	Type	Description
canvas	component	the target canvas.
sx,sy	string	the scale in the x and y directions (1 = normal scale, -1 = negative scale, 0.5 = half scale, 2.0 = double scale).

Example

registerAction('canvasScaleTransformTest', '', 'canvasScaleTransformTest', 'component:Canvas:canvas');
function canvasScaleTransformTest(canvas) {
    //draw normal shape
    setProperty(canvas, 'stroke_style', '#FF0000FF');
    setProperty(canvas, 'line_width', 4);
    canvasBeginPath(canvas);
    canvasAddRoundedRect(canvas, 200, 100, 100, 100, 20);
    canvasDrawPathStroke(canvas);
    //draw scaled shape
    setProperty(canvas, 'stroke_style', '#FF0000FF');
    setProperty(canvas, 'line_width', 4);
    canvasBeginPath(canvas);
    canvasScaleTransform(canvas, 0.5, 0.5); //applies scale in percentage
    canvasAddRoundedRect(canvas, 200, 100, 100, 100, 20);
    canvasDrawPathStroke(canvas);
    canvasResetTransform(canvas); //removes the transform scale for future operations.
}

---

canvasSetBrushAngle(canvas, angle)

canvasSetBrushAngle sets the brush angle for image mode operations like canvasDrawPathStroke and canvasDrawPathFill
See canvasSetBrushMode for example of a gradient being set on an angle.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
angle	real	the image angle in degrees.

---

canvasSetBrushBlendMode(canvas, blendmode)

canvasSetBrushBlendMode sets the brush mode for operations like canvasDrawPathStroke and canvasDrawPathFill
Look at canvasStampBarcode for example code.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
blendmode	int	the brush blendmodes are 0 NoBlend, 1 Src, 2 Dst, 3 SrcOver, 4 DstOver, 5 SrcIn, 6 DstIn, 7 SrcOut, 8 DstOut, 9 SrcATop, 10 DstATop, 11 XOR, 12 Plus, 13 Minus, 14 Multiply, 16 Screen, 17 Overlay, 18 Darken, 19 Lighten, 20 Dodge, 21 Burn, 22 Hardlight, 23 Softlight, 24 Difference, 25 Exclusion, 26 contrast, 27 invert, 28 invertRGB.

---

canvasSetBrushColor(canvas, color)

canvasSetBrushColor sets the brush color for operations like canvasDrawPathStroke and canvasDrawPathFill
Instead you can use setProperty(canvas, 'stroke_style', '#FF0000FF'); or setProperty(canvas, 'fill_style', '#FF0000FF');
These will set the color for pathStroke and pathFill separately where as canvasSetBrushColor sets the color for both.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
color	color	the color for the brush.

Example

registerAction('canvasSetBrushColorTest', '', 'canvasSetBrushColorTest', 'component:Canvas:canvas');
function canvasSetBrushColorTest(canvas) {
    canvasSetBrushColor(canvas, '00FF00FF');
    setProperty(canvas, 'line_width', 20);
    canvasBeginPath(canvas);
    canvasAddMove(canvas, 100, 100);
    canvasAddLine(canvas, 250, 100);
    canvasAddLine(canvas, 100, 150);
    canvasClosePath(canvas);
    canvasDrawPathStroke(canvas);
}

---

canvasSetBrushGradientEnd(canvas, color_start)

canvasSetBrushGradientEnd sets the brush end gradient color for operations like canvasDrawPathStroke and canvasDrawPathFill
Look at canvasGradientClear for example code.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
color_start	color	the end gradient color.

---

canvasSetBrushGradientStart(canvas, color_start)

canvasSetBrushGradientStart sets the brush start gradient color for operations like canvasDrawPathStroke and canvasDrawPathFill
Look at canvasGradientClear for example code.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
color_start	color	the start gradient color.

---

canvasSetBrushMode(canvas, mode)

canvasSetBrushMode sets the brush mode for operations like canvasDrawPathStroke and canvasDrawPathFill

Parameters:

Name	Type	Description
canvas	component	the target canvas.
mode	int	the brush modes are 0 Uniform, 1 ImageClip, 2 ImageRepeat, 3 LinearGradient, 4 RadialGradient, 5 ConicGradient, 6 DiamondGradient.

Example

registerAction('canvasSetBrushModeTest', '', 'canvasSetBrushModeTest', 'component:Canvas:canvas');
function canvasSetBrushModeTest(canvas) {
    var pixelWidth = canvasGetWidth(canvas);
    var pixelHeight = canvasGetHeight(canvas);
    
    canvasBeginPath(canvas);
    canvasSetBrushScale(canvas, 1.5, 1.5); //this increases the size of the central diamond gradient shape
    canvasSetBrushGradientStart(canvas, '0x0000FFFF'); //center colour of the diamond gradient
    canvasSetBrushGradientEnd(canvas, '0x00FF00FF'); //outer colour of the diamond gradient
    canvasSetBrushMode(canvas, 6); //look at the BrushMode property for more gradient options.
    canvasSetBrushPosition(canvas, pixelWidth/2, pixelHeight/2); //This is setting the center of the diamond gradient shape to the center of the canvas
    canvasSetBrushAngle(canvas, 45); //This rotates the diamond gradient by 45 degrees. 
    
    //This is setting the size of the rectangle to the size of the canvas
    canvasAddMove(canvas, 0, 0);
    canvasAddLine(canvas, pixelWidth, 0);
    canvasAddLine(canvas, pixelWidth, pixelHeight);
    canvasAddLine(canvas, 0, pixelHeight);
    canvasClosePath(canvas);
    canvasDrawPathFill(canvas);
    
    //undo the gradient options set here so future operations are not affected by it
    canvasGradientClear(canvas);
}

---

canvasSetBrushPointSample(canvas, pointsamplemode)

canvasSetBrushPointSample sets the brush to pointsample - this is used for sampling barcodes and other hard edged images.
Used before making canvasStampBarcode() calls or other image stamping functions.
See canvasStampBarcodeTest for example.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
pointsamplemode	bool	Normally false, but set to true for barcodes and other hard edged images.

---

canvasSetBrushPosition(canvas, x, y)

canvasSetBrushPosition sets the brush position for image mode operations like canvasDrawPathStroke and canvasDrawPathFill
See canvasSetBrushMode for example of a gradient being set on an angle.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
x	real	the image x position.
y	real	the image y position.

---

canvasSetBrushScale(canvas, sx,sy)

canvasSetBrushScale sets the brush scale for image mode operations like canvasDrawPathStroke and canvasDrawPathFill
See canvasSetBrushMode for example of a gradient being set on an angle.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
sx,sy	real	the image scale x and scale y.

---

canvasSetBrushSource(canvas, canvas_source)

canvasSetBrushSource sets the brush image source for operations like canvasDrawPathStroke and canvasDrawPathFill

Parameters:

Name	Type	Description
canvas	component	the target canvas.
canvas_source	component	the source canvas to use for the brush.

Example

registerAction('canvasSetBrushSourceTest', '', 'canvasSetBrushSourceTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasSetBrushSourceTest(canvas, canvas2) {
    canvasBeginPath(canvas);
    canvasSetBrushSource(canvas, canvas2);
    canvasSetBrushSourceTopLeft(canvas, 100, 100);
    canvasSetBrushSourceBottomRight(canvas, 300, 300);
    canvasSetBrushMode(canvas, 2);
    canvasAddMove(canvas, 100, 100);
    canvasAddLine(canvas, 550, 100);
    canvasAddLine(canvas, 550, 550);
    canvasAddLine(canvas, 100, 550);
    canvasClosePath(canvas);
    canvasDrawPathFill(canvas);
}

---

canvasSetBrushSourceBottomRight(canvas, x, y)

canvasSetBrushSourceBottomRight sets the brush bottom right clip for image mode operations like canvasDrawPathStroke and canvasDrawPathFill
See canvasSetBrushSource for example code of how to use this.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
x	real	the image bottom right clip position.
y	real	the image bottom right clip position.

---

canvasSetBrushSourceTopLeft(canvas, x, y)

canvasSetBrushSourceTopLeft sets the brush top left clip for image mode operations like canvasDrawPathStroke and canvasDrawPathFill
See canvasSetBrushSource for example code of how to use this.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
x	real	the image top left clip position.
y	real	the image top left clip position.

---

canvasSetFontFilename(canvas, filename)

canvasSetFontFilename sets the font for operations like canvasDrawTextStroke and canvasDrawTextFill

Parameters:

Name	Type	Description
canvas	component	the target canvas.
filename	string	the filename of a ttf or otf font in the project fonts folder.

Example

registerAction('canvasSetFontFilenameTest', '', 'canvasSetFontFilenameTest', 'component:Canvas:canvas');
function canvasSetFontFilenameTest(canvas) {
    canvasSetFontFilename(canvas, "vera.ttf");
    canvasSetFontHeight(canvas, 60);
    setProperty(canvas, 'fill_style', '#FF0000FF');
    canvasDrawTextFill(canvas, 'Hello World', 100, 100, 1000);
}

---

canvasSetFontHeight(canvas, height)

canvasSetFontFilename sets the font height for operations like canvasDrawTextStroke and canvasDrawTextFill
Look at canvasSetFontFilename for example code.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
height	real	the font height in pixels.

---

canvasSetPixel(canvas, x, y, color)

canvasSetPixel sets the color of the pixel at the given coordinates on the canvas to the specified color.

Parameters:

Name	Type	Description
canvas	component	the canvas to update.
x	int	pixel x position.
y	int	pixel y position.
color	color	pixel RGBA color.

Example

registerAction('canvasSetPixelTest', '', 'canvasSetPixelTest', 'component:Canvas:canvas');
function canvasSetPixelTest(canvas) {
    //This makes a thick red line at the top left of the canvas 4 pixels tall and 75 pixels across placed 10 pixels in from the edges.
    for (i = 0; i < 75; i++) {
        canvasSetPixel(canvas, 10+i, 10, 0xFF0000FF);
        canvasSetPixel(canvas, 10+i, 11, 0xFF0000FF);
        canvasSetPixel(canvas, 10+i, 12, 0xFF0000FF);
        canvasSetPixel(canvas, 10+i, 13, 0xFF0000FF);
    }
}

---

canvasSetPixelData(canvas, data, format)

canvasSetPixelData Sets new pixel data to the canvas in specified format

Parameters:

Name	Type	Description
canvas	component	the canvas.
data	ArrayBuffer	the pixel data.
format	int	pixel data format.

Example

registerAction('canvasSetPixelDataTest', '', 'canvasSetPixelDataTest', 'component:Canvas:canvas');
function canvasSetPixelDataTest(canvas) {
    var ArrayBuffer = canvasGetPixelData(canvas);
    var myDataView = new DataView(ArrayBuffer);
    myDataView.setInt16(0, 256, true);
    for(var i = 4; i < ctx.pixelStride*5; i+=4) { //5 rows of data written as blue (starts at bottom left of image)
        myDataView.setUint8(i, 0);
        myDataView.setUint8(i+1, 0);
        myDataView.setUint8(i+3, 255);
    }
    
    var width = 1000;
    var height = 978;
    var stride = ctx.pixelStride;
    var format = 4; //'RGBA'
    var resultData = myDataView.buffer;
    canvasSetPixelData(canvas, width, height, stride, format, resultData);
}

---

canvasSetStrokeCap(canvas, cap_type)

canvasSetStrokeCap sets the brush cap for stroke operations like canvasDrawPathStroke

Parameters:

Name	Type	Description
canvas	component	the target canvas.
cap_type	int	the cap type 0 ButtCap, 1 SquareCap, 2 RoundCap.

---

canvasSetStrokeInnerJoin(canvas, join_type)

canvasSetStrokeInnerJoin sets the brush inner join for stroke operations like canvasDrawPathStroke

Parameters:

Name	Type	Description
canvas	component	the target canvas.
join_type	int	the join type 0 InnerBevel, 1 InnerMiter, 2 InnerJag, 3 InnerRound.

---

canvasSetStrokeInnerMiterLimit(canvas, limit)

canvasSetStrokeInnerMiterLimit sets the brush inner miter limit for stroke operations like canvasDrawPathStroke

Parameters:

Name	Type	Description
canvas	component	the target canvas.
limit	real	the inner miter limit in degrees.

---

canvasSetStrokeJoin(canvas, join_type)

canvasSetStrokeJoin sets the brush join for stroke operations like canvasDrawPathStroke

Parameters:

Name	Type	Description
canvas	component	the target canvas.
join_type	int	the join type 0 MiterJoin, 1 MiterJoinRevert, 2 RoundJoin, 3 BevelJoin, 4 MiterJoinRound.

---

canvasSetStrokeMiterLimit(canvas, limit)

canvasSetStrokeMiterLimit sets the brush miter limit for stroke operations like canvasDrawPathStroke

Parameters:

Name	Type	Description
canvas	component	the target canvas.
limit	real	the miter limit in degrees.

---

canvasSetStrokeWidth(canvas, width)

canvasSetStrokeWidth sets the brush width for stroke operations like canvasDrawPathStroke

Parameters:

Name	Type	Description
canvas	component	the target canvas.
width	real	the width in pixels of the stroke.

Example

registerAction('canvasSetStrokeWidthTest', '', 'canvasSetStrokeWidthTest', 'component:Canvas:canvas');
function canvasSetStrokeWidthTest(canvas) {
    setProperty(canvas, 'stroke_style', '#FF0000FF');
    canvasSetStrokeWidth(canvas, 8);
    canvasBeginPath(canvas);
    canvasAddRoundedRect(canvas, 200, 100, 100, 100, 20);
    canvasDrawPathStroke(canvas);
}

---

canvasSkewTransform(canvas, sx,sy)

canvasSkewTransform updates the transform skew for the current path - this will be applied during canvasDrawPathFill or canvasDrawPathStroke

Parameters:

Name	Type	Description
canvas	component	the target canvas.
sx,sy	string	the skew in the x and y directions (can be negative or positive).

Example

registerAction('canvasSkewTransformTest', '', 'canvasSkewTransformTest', 'component:Canvas:canvas');
function canvasSkewTransformTest(canvas) {
    //draw normal shape
    setProperty(canvas, 'stroke_style', '#FF0000FF');
    setProperty(canvas, 'line_width', 4);
    canvasBeginPath(canvas);
    canvasAddRoundedRect(canvas, 200, 100, 100, 100, 20);
    canvasDrawPathStroke(canvas);
    //draw skewed shape
    setProperty(canvas, 'stroke_style', '#FF0000FF');
    setProperty(canvas, 'line_width', 4);
    canvasBeginPath(canvas);
    canvasSkewTransform(canvas, 45, 45); //applies skew in degrees
    canvasAddRoundedRect(canvas, 200, 100, 100, 100, 20);
    canvasDrawPathStroke(canvas);
    canvasResetTransform(canvas); //removes the transform skew for future operations.
}

---

canvasSmoothPath(canvas, steps)

canvasSmoothPath converts lines on a path into a bezier curve.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
steps	real	number of steps of smoothing (0 to 2).

Example

registerAction('canvasSmoothPathTest', '', 'canvasSmoothPathTest', 'component:Canvas:canvas');
function canvasSmoothPathTest(canvas) {
    canvasResetColor(canvas, '0x448844FF'); //sets the canvas bg color to green
    setProperty(canvas, 'stroke_style', '#0000FFFF'); //sets the drawing color to blue
    canvasAddMove(canvas,100,Math.cos(0.0)*190+500);
    for (i = 0; i < 15; i++) {
        canvasAddLine(canvas,i*50 + 100,Math.cos(i)*190 + 500);
    }
    //draw jagged lines
    canvasDrawPathStroke(canvas);
    //now smooth and draw smooth curve below
    canvasSmoothPath(canvas,2);
    canvasTranslateTransform(canvas,0,200);
    canvasDrawPathStroke(canvas);
    canvasResetTransform(canvas);
}

---

canvasStampAdaptiveThreshold(canvas, canvas_src, src_x,src_y, src_width,src_height, dst_x,dst_y, strength, radius, blend)

canvasStampAdaptiveThreshold thresholds with variable strength given a radius of local contrast. The blend 0-1 is how much of the image is preserved vs thresholded.

Parameters:

Name	Type	Description
canvas	component	the target canvas
canvas_src	component	the source canvas
src_x,src_y	int	the source top left
src_width,src_height	int	the source width and height
dst_x,dst_y	int	the destination position top left
strength	real	-1 to 1 how strong the threshold is towards binary
radius	int	1 to 1000 how wide the radius to check for local contrast
blend	real	0 to 1 how much of the image is preserved vs thresholded (0.5 is a common value)

Example

registerAction('canvasStampAdaptiveThresholdTest', '', 'canvasStampAdaptiveThresholdTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasStampAdaptiveThresholdTest(canvas, canvas2) {
    var pixelWidth = canvasGetWidth(canvas2);
    var pixelHeight = canvasGetHeight(canvas2);
    canvasStampAdaptiveThreshold(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 0.2, 10, 0.5);
}

---

canvasStampAutoBrightnessContrast(canvas, canvas_src, src_x,src_y, src_width,src_height, dst_x,dst_y)

canvasStampAutoBrightnessContrast stamp a source canvas region onto the target canvas while calculating and applying the maximum brightness and contrast

Parameters:

Name	Type	Description
canvas	component	the target canvas.
canvas_src	component	the source canvas.
src_x,src_y	int	the source top left.
src_width,src_height	int	the source width and height.
dst_x,dst_y	int	the destination position top left.

Example

registerAction('canvasStampAutoBrightnessContrastTest', '', 'canvasStampAutoBrightnessContrastTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasStampAutoBrightnessContrastTest(canvas, canvas2) {
    var pixelWidth = canvasGetWidth(canvas2);
    var pixelHeight = canvasGetHeight(canvas2);
    canvasStampAutoBrightnessContrast(canvas, canvas2, 0, 0, pixelWidth-1, pixelHeight-1, 0, 0);
}

---

canvasStampAutoColor(canvas, canvas_src, src_x,src_y, src_width,src_height, dst_x,dst_y)

canvasStampAutoColor stamp a source canvas region onto the target canvas while calculating and applying strong color saturation/balance

Parameters:

Name	Type	Description
canvas	component	the target canvas
canvas_src	component	the source canvas
src_x,src_y	int	the source top left
src_width,src_height	int	the source width and height
dst_x,dst_y	int	the destination position top left

Example

registerAction('canvasStampAutoColorTest', '', 'canvasStampAutoColorTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasStampAutoColorTest(canvas, canvas2) {
    var pixelWidth = canvasGetWidth(canvas2);
    var pixelHeight = canvasGetHeight(canvas2);
    canvasStampAutoColor(canvas, canvas2, 0, 0, pixelWidth-1, pixelHeight-1, 0, 0);
}

---

canvasStampAvgDelta(canvas, canvas_src, src_x,src_y, src_width,src_height, dst_x,dst_y, min_alpha)

canvasStampAvgDelta combines a target image with a source image. This averages the two images together. Repeated calls to this function
drawing the source over the destination will creep closer towards the source by half each time. Writing new images will display a rolling
average with each historic frame being half the next, useful for blending and for motion detection.

Parameters:

Name	Type	Description
canvas	component	the target canvas
canvas_src	component	the source canvas
src_x,src_y	int	the source top left
src_width,src_height	int	the source width and height
dst_x,dst_y	int	the destination position top left
min_alpha	int	(0 to 255) can be used to stop the alpha from be averaged to zero

Example

registerAction('canvasStampAvgDeltaTest', '', 'canvasStampAvgDeltaTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasStampAvgDeltaTest(canvas, canvas2) {
    var pixelWidth = canvasGetWidth(canvas2);
    var pixelHeight = canvasGetHeight(canvas2);
    canvasStampAvgDelta(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 0);
}

---

canvasStampBarcode(canvas, code, x, y, angle, size, codetype, codelevel)

canvasStampBarcode stamp a 1D or 2D barcode onto the canvas.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
code	string	the text/numbers to encode (note only some barcodes such as Aztec, QR, PDF417 support letters).
x	real	the x position for the top left of where to put the barcode.
y	real	the y position for the top left of where to put the barcode.
angle	real	the angle in degrees.
size	real	size from 1-100 pixels per bar.
codetype	int	the barcode (Aztec=1, Codeabar=2, Code39=4, code93=8, code128=16, dataMatrix=32, EAN8=64, EAN13=128, ITF=256, Maxicode=512, PDF417=1024, QRcode=2048, RSS14=4096, RSSE=8192, UPCA=16384, UPCE=32768).
codelevel	int	Some codes support redundancy levels, 1=low, 4=medium, 7=high.

Example

registerAction('canvasStampBarcodeTest', '', 'canvasStampBarcodeTest', 'component:Canvas:canvas');
function canvasStampBarcodeTest(canvas) {
    canvasSetBrushPointSample(canvas, true);
    canvasSetBrushBlendMode(canvas, 3);
    canvasStampBarcode(canvas, "Text to user",180,180,0,17,uComps.StampCodeType.AZTEC,0);
    canvasStampBarcode(canvas, "123456",780,200,0,8,uComps.StampCodeType.PDF417,0);
    canvasStampBarcode(canvas, "345 and text",220,600,0,19,uComps.StampCodeType.QR_CODE,0);
}

---

canvasStampBuffer(canvas, canvas_src, src_x,src_y, src_width,src_height, dst_x,dst_y)

canvasStampBuffer stamp a source canvas region onto the target canvas

Parameters:

Name	Type	Description
canvas	component	the target canvas
canvas_src	component	the source canvas
src_x,src_y	int	the source top left
src_width,src_height	int	the source width and height
dst_x,dst_y	int	the destination position top left

Example

registerAction('canvasStampBufferTest', '', 'canvasStampBufferTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasStampBufferTest(canvas, canvas2) {
    canvasCopyBuffer(canvas, canvas2);
    var pixelWidth = canvasGetWidth(canvas);
    var pixelHeight = canvasGetHeight(canvas);
    canvasStampBuffer(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0);
}

---

canvasStampChromaKey(canvas, canvas_src, src_x,src_y, src_width,src_height, dst_x,dst_y, hue, hue_mask, luminance_mask, mask_shadow, mask_light)

canvasStampChromaKey removes from the canvas_src (this process is known as a key) a specific color (or chroma). This function uses the HSV transform to calculate the hue (tint),
saturation (amount of tint) and value (brightness) - this allows us to control how much of the highlights and shadows are preserved when
a colored background is removed.

Parameters:

Name	Type	Description
canvas	component	the target canvas
canvas_src	component	the source canvas
src_x,src_y	int	the source top left
src_width,src_height	int	the source width and height
dst_x,dst_y	int	the destination position top left
hue	real	the color converted to hue (hsv) from 0 to 360, 0 red, 90 green, 180 blue
hue_mask	real	the hue tollerance to generate the mask, 0 to 1, 0.1 or 0.06 are good values
luminance_mask	real	the amount of luminance tollerance, 0 to 5, 1.5 is a good value
mask_shadow	real	the amount of shadow preserved, 0 to 5, 2.6 is a good value, smaller means less shadow is added
mask_light	real	the amount of saturated color preserved, 0 to 5, 0.9 is a good value, more means more highlights may be picked up

Example

//This operation won't show if you use the same component as source and destination. 
//The size of the destination needs to be big enough to fit the stamp otherwise you will only see part of it and it may not be clear it has worked.
registerAction('canvasStampChromaKeyTest', '', 'canvasStampChromaKeyTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasStampChromaKeyTest(canvas, canvas2) {
    var pixelWidth = canvasGetWidth(canvas2);
    var pixelHeight = canvasGetHeight(canvas2);
    canvasResetColor(canvas, '0xFFFFFFFF'); //make bg white so we can see the result
    canvasStampChromaKey(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 90, 0.06, 1.5, 2.6, 0.9);
}

---

canvasStampColorChannel(canvas, canvas_src, src_x,src_y, src_width,src_height, dst_x,dst_y, src_channel, dst_channel)

canvasStampColorChannel stamp a source canvas region onto the target canvas from one channel to another

Parameters:

Name	Type	Description
canvas	component	the target canvas
canvas_src	component	the source canvas
src_x,src_y	int	the source top left
src_width,src_height	int	the source width and height
dst_x,dst_y	int	the destination position top left
src_channel	int	(0 to 3) 0 Red, 1 Green, 2 Blue, 3 Alpha
dst_channel	int	(0 to 3) 0 Red, 1 Green, 2 Blue, 3 Alpha

Example

registerAction('canvasStampColorChannelTest', '', 'canvasStampColorChannelTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasStampColorChannelTest(canvas, canvas2) {
    var pixelWidth = canvasGetWidth(canvas2);
    var pixelHeight = canvasGetHeight(canvas2);
    canvasStampColorChannel(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 1, 2);
}

---

canvasStampCustom(canvas, canvas_src, canvas_lut, src_x, src_y, src_width,src_height, dst_x, dst_y, registers, pixel_code)

canvasStampCustom stamp a custom set of vectorised instructions onto the canvas

This is an image processing register based virtual machine. This exploits a single CPU core and is vectorised for better performance than scripting. For much better performance a VulkanCompute shader would be recommended.
There are 256 floating point registers which hold 4 channels each. For an 8 bit RGBA image this would be equivalent to 0-255 for each channel where each register is equivalent to a pixel.
The instruction buffer is composed of 8 bit instruction op codes, 8 bit register indexes, 16 bit program addresses and 32 bit floating point values.

The instruction set is as follows;

noop = 0, // no operation
samp = 1, // samp(pixel_index_from, reg) sample from 0 1 2 / 3 4 5 / 6 7 8 (source)
// 9 10 11 / 12 13 14 / 15 16 17 (destination) into register
sampgrey = 3, // sample grey(reg_to, channel_to) 9 pixels greyscale into register channel
sampavg = 4, // sample avg(reg_to) register holds r, g and b averages for 9 source pixels
sampsum = 5, // sample sum(reg_to) register holds r, g and b sum for 9 source pixels
sampmax = 6, // sample max(reg_to) register holds r, g and b maximum across the 9 source pixels
sampmin = 7, // sample min(reg_to) register holds r, g and b minimum across the 9 source pixels

copy = 8, // direct copy() from source into the destination pixel
ccopy = 9, // copy(channel_from, channel_to) from source into the destination pixel
store = 10, // store(reg) from selected register to destination all channels (RGBA)
cstore = 11, // channel store(reg, channel_from, channel_to) from register channel into the
// destination pixel channel

add = 16, // add(reg,reg_value) add reg_value into reg
addc = 17, // add constant(reg,const) add constant into reg RGB
cadd = 18, // channel add(reg,channel,reg_value,channel_value) add reg_value/channel_value
// into reg/channel
caddc = 19, // channel add constant (reg,channel,const) add constant into reg/channel

sub = 20, // sub(reg,reg_value) sub reg_value into reg
subc = 21, // sub constant(reg,const) sub constant into reg RGB
csub = 22, // channel sub(reg,channel,reg_value,channel_value) sub reg_value/channel_value
// into reg/channel
csubc = 23, // channel sub constant (reg,channel,const) sub constant into reg/channel

mul = 24, // mul(reg,reg_value) mul reg_value into reg
mulc = 25, // mul constant(reg,const) mul constant into reg RGB
cmul = 26, // channel mul(reg,channel,reg_value,channel_value) mul reg_value/channel_value
// into reg/channel
cmulc = 27, // channel mul constant (reg,channel,const) mul constant into reg/channel
div = 28, // div(reg,reg_value) div reg_value into reg
divc = 29, // div constant(reg,const) div constant into reg RGB
cdiv = 30, // channel div(reg,channel,reg_value,channel_value) div reg_value/channel_value
// into reg/channel
cdivc = 31, // channel div constant (reg,channel,const) div constant into reg/channel
sin = 32, // sin(reg, reg_value) sin(reg_value) into register
csin = 33, // channel sin(reg, channel, reg_value, channel_value) sin(reg_value/channel_value)
// into register/channel
cos = 34, // cos(reg, reg_value) cos(reg_value) into register
ccos = 35, // channel cos(reg, channel, reg_value, channel_value) cos(reg_value/channel_value)
// into register/channel
tan = 36, // tan(reg, reg_value) reg = tan(reg_value)
ctan = 37, // channel tan(reg, channel, reg_value, channel_value) tan(reg_value/channel_value)
// into register/channel
atan = 38, // atan(reg, reg_value) atan(reg_value) into register
catan = 39, // channel atan(reg, channel, reg_value, channel_value)
// atan(reg_value/channel_value) into register/channel
pow = 40, // pow(reg, reg_value, const) pow reg_value ^ const into reg (RGB)
cpow = 41, // channel pow(reg, channel, reg_value, channel_value, const) pow
// reg_value/channel_value ^ const into reg/channel (RGB)
log = 42, // log(reg, reg_value) log reg_value into reg (RGB)
clog = 43, // channel log(reg, channel, reg_value, channel_value) log reg_value/channel_value
// into reg/channel (RGB)
sqrt = 44, // sqrt(reg, reg_value) sqrt reg_value into reg (RGB)
csqrt = 45, // channel sqrt(reg, channel, reg_value, channel_value) sqrt
// reg_value/channel_value into reg/channel (RGB)
abs = 46, // abs(reg, reg_value) abs reg_value into reg (RGB)
cabs = 47, // channel abs(reg, channel, reg_value, channel_value) abs reg_value/channel_value
// into reg/channel (RGB)
clamp = 48, // clamp(reg, reg_value, min, max) clamp reg_value(min,max) into reg (RGB)
cclamp = 49, // channel clamp(reg, channel, reg_value, channel_value, min, max) clamp
// reg_value/channel_value(min,max) into reg/channel (RGB)
floor = 51, // floor(reg, reg_value) floor reg_value into reg (RGB)
cfloor = 52, // channel floor(reg, channel, reg_value, channel_value) floor
// reg_value/channel_value into reg/channel (RGB)
ceil = 53, // ceil(reg, reg_value) ceil reg_value into reg (RGB)
cceil = 54, // channel ceil(reg, channel, reg_value, channel_value) ceil
// reg_value/channel_value into reg/channel (RGB)
compd = 55, // compute distance(reg,channel, x, y) compute distance to a point from current
// pixel into reg/channel
compa = 56, // compute angle(reg,channel, x, y) compute relative angle into reg/channel (radians)
rcompd = 57, // register compute distance(reg,channel, reg_value) compute distance to a point
// from current pixel to reg_value(RG) into reg/channel
rcompa = 58, // register compute angle(reg,channel, reg_value) compute relative angle from
// current pixel to reg_value(RG) into reg/channel (radians)
uv = 59, // uv(reg) put current pixel uv (0-1) x and y ratio into register first two
// channels(rg/xy)
typeclamp = 60, // clamp(reg, reg_source) to the output type automatically (0-255 for current
// 8 bit image types)
hsv2rgb = 61, // hsv into rgb (reg, reg_value) compute rgb from reg_value into reg
rgb2hsv = 62, // rgb into hsv (reg, reg_value) compute hsv from reg_value into reg
xyz2rgb = 63, // normal map encode into color xyz into rgb (reg, reg_value) (0/127/255) to (-1/0/1)
rgb2xyz = 64, // decode normal map into vectors rgb into xyz (reg, reg_value) (-1/0/1) to (0/127/255)
load = 65, // load(reg,value) (RGB)
cload = 66, // channel load(reg,channel,value)
// alpha blended version of store
cmixa8 = 67, // channel mix(channel_dst, reg_source, channel_source) from selected register,
// using reg alpha (8 bit = 0-255), mixed with destination pixels (RGB)
mixa8 = 68, // mix(reg) from selected register, using reg alpha (8 bit = 0-255), mixed with
// destination pixels (RGB)
cmixa = 69, // channel mix(channel_dst, reg_source, channel_source) from selected register,
// using reg alpha (0-1), mixed with destination pixels (RGB)
mixa = 70, // mix(reg) from selected register, using reg alpha (0-1), mixed with destination
// pixels (RGB)
rmixa = 71, // register mix(reg1,reg2) mix two rgb registers using alphas proportion into
// destination pixels (RGB)
cmixc = 72, // channel mix constant(channel_dst,reg_source,channel_source,ratio) mix dst and
// register channels using a constant floating point ratio (0-1)
jmp = 74, // jump to address (addr)
cjeq = 75, // jump equal(reg, channel, reg2, channel, addr)
cjneq = 76, // jump not equal(reg1, channel, reg2, channel, addr)
cjlt = 77, // jump less than (reg1, channel, reg2, channel, addr)
cjgt = 78, // jump greater than (reg1, channel, reg2, channel, addr)
jeqz = 79, // jump equal zero(reg1, channel, addr)
jneqz = 80, // jump not equal zero(reg1, channel, addr)
jltz = 81, // jump less than zero(reg1, channel, addr)
jgtz = 82, // jump greater than zero(reg1, channel, addr)
jmplong = 83, // jump increment (addr_low,addr_high)
lut = 85, // lut(reg_uv) point sample from LUT image using 0-1 UV in RG channels + alpha blend
clut = 86, // channel lut(channel_dst, reg_uv, channel_src) point sample from LUT image using
// 0-1 UV in RG from and to specified channels
hlut8 = 87, // horizontal lut(reg_y,channel_y) point sample from LUT image using U = src
// RGB(0-255) and V = reg_y (0-255) + alpha blend
mixlut = 88, // blend destination with lut(reg_uv) point sample from LUT image using 0-1 UV in
// RG channels + alpha blend
mixhlut8 = 89, // blend destination with horizontal lut(reg_y,channel_y) point sample from LUT
// image using U = src RGB(0-255) and V = reg_y (0-255) + alpha blend
bezierspline = 91, // bezierspline(reg, channel, reg_packed(rgbargba), reg_value, channel_value)

halt = 255

Parameters:

Name	Type	Description
canvas	component	the target canvas
canvas_src	component	the source canvas
canvas_lut	component	the Look Up Table canvas (optional)
src_x	real	the source position
src_y	real	the source position
src_width,src_height	real	the size
dst_x	real	the destination position
dst_y	real	the destination position
registers	buffer	optional 256 real32 registers
pixel_code	buffer	the 8 bit opcodes to execute

Example

var reg_buffer = new ArrayBuffer(4);
var registers = new DataView(reg_buffer);
registers.setFloat32(0, 1);
var op_buffer = new ArrayBuffer(4);
var pixel_code = new DataView(op_buffer);
pixel_code.setFloat32(0, 1);

---

canvasStampHsv(canvas, canvas_src, src_x,src_y, src_width,src_height, dst_x,dst_y, hue, saturation, value)

canvasStampHsv stamps the canvas_src onto the canvas as an image which has been adjusted with the HSV transform. HSV provides
control over the hue (tint), saturation (amount of tint) and value (brightness) giving control of the amount of color in the image

Parameters:

Name	Type	Description
canvas	component	the target canvas
canvas_src	component	the source canvas
src_x,src_y	int	the source top left
src_width,src_height	int	the source width and height
dst_x,dst_y	int	the destination position top left
hue	real	0 no change, (-180 to 180), each 90 plus and minus is a change in RGB hue
saturation	real	0 no change, (-1 to 1) -1 = desaturated, 1 = saturated
value	real	0 no change, (-1 to 1) -1 = dark, 1 = bright

Example

registerAction('canvasStampHsvTest', '', 'canvasStampHsvTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasStampHsvTest(canvas, canvas2) {
    var pixelWidth = canvasGetWidth(canvas2);
    var pixelHeight = canvasGetHeight(canvas2);
    canvasStampHsv(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 90, 0.5, 0.5);
}

---

canvasStampImage(canvas, canvas_src, src_x,src_y, src_width,src_height, dst_x,dst_y, blendmode, samplemode)

canvasStampImage combines a target image with a source image with sub pixel accuracy and different blend and sample modes.

Parameters:

Name	Type	Description
canvas	component	the target canvas
canvas_src	component	the source canvas
src_x,src_y	real	the source top left
src_width,src_height	real	the source width and height
dst_x,dst_y	real	the destination position top left
blendmode	int	0 noblend, 1 source - See here for the full set canvasSetBrushBlendMode
samplemode	int	0 default linear, 1 nearest neighbor for hard edges images like barcodes

Example

registerAction('canvasStampImageTest', '', 'canvasStampImageTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasStampImageTest(canvas, canvas2) {
    var pixelWidth = canvasGetWidth(canvas2);
    var pixelHeight = canvasGetHeight(canvas2);
    canvasStampImage(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 1, 1);
}

---

canvasStampImageCenter(canvas, canvas_src, src_x,src_y, src_width,src_height, dst_x,dst_y, scale_x,scale_y, angle, blendmode, samplemode)

canvasStampImage combines a target image with a centered, scaled and rotated source image with sub pixel accuracy and different blend and sample modes.

Parameters:

Name	Type	Description
canvas	component	the target canvas
canvas_src	component	the source canvas
src_x,src_y	real	the source top left
src_width,src_height	real	the source width and height
dst_x,dst_y	real	the destination position in the center
scale_x,scale_y	real	the scale
angle	real	the angle in degrees
blendmode	int	0 noblend, 1 source - See here for the full set canvasSetBrushBlendMode
samplemode	int	0 default linear, 1 nearest neighbor for hard edges images like barcodes

Example

registerAction('canvasStampImageCenterTest', '', 'canvasStampImageCenterTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasStampImageCenterTest(canvas, canvas2) {
    var pixelWidth = canvasGetWidth(canvas2);
    var pixelHeight = canvasGetHeight(canvas2);
    canvasStampImageCenter(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 200, 200, 3, 3, 45, 1, 1, true);
}

---

canvasStampImagePerspective(canvas, canvas_src, src_p1x,src_p1y, src_p2x,src_p2y, src_p3x,src_p3y, src_p4x,src_p4y, dst_p1x,dst_p1y, dst_p2x,dst_p2y, dst_p3x,dst_p3y, dst_p4x,dst_p4y, blendmode, samplemode)

canvasStampImagePerspective combines a target image with a source image with sub pixel accuracy applying a perspective
warp with a affine transformed source quad mapping to an affine transformed destination quad using different blend and sample modes.

Parameters:

Name	Type	Description
canvas	component	the target canvas
canvas_src	component	the source canvas
src_p1x,src_p1y	real	the source top left
src_p2x,src_p2y	real	the source top right
src_p3x,src_p3y	real	the source bottom right
src_p4x,src_p4y	real	the source bottom left
dst_p1x,dst_p1y	real	the destination top left
dst_p2x,dst_p2y	real	the destination top right
dst_p3x,dst_p3y	real	the destination bottom right
dst_p4x,dst_p4y	real	the destination bottom left
blendmode	int	0 noblend, 1 source - See here for the full set canvasSetBrushBlendMode
samplemode	int	0 default linear, 1 nearest neighbor for hard edges images like barcodes

Example

registerAction('canvasStampImagePerspectiveTest', '', 'canvasStampImagePerspectiveTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasStampImagePerspectiveTest(canvas, canvas2) {
    var pixelWidth = canvasGetWidth(canvas2);
    var pixelHeight = canvasGetHeight(canvas2);
    canvasStampImagePerspective(canvas, canvas2, 0, 0, 300, 0, 300, 300, 0, 300, 0, 0, 300, 0, 300, 300, 0, 300);
}

---

canvasStampImageWarp(canvas, canvas_src, src_x,src_y, src_width,src_height, dst_p1x,dst_p1y, dst_p2x,dst_p2y, dst_p3x,dst_p3y, dst_p4x,dst_p4y, blendmode, samplemode)

canvasStampImageWarp combines a target image with a source image with sub pixel accuracy applying an affine
warp with different blend and sample modes.

Parameters:

Name	Type	Description
canvas	component	the target canvas
canvas_src	component	the source canvas
src_x,src_y	real	the source top left
src_width,src_height	real	the source width and height
dst_p1x,dst_p1y	real	the destination top left
dst_p2x,dst_p2y	real	the destination top right
dst_p3x,dst_p3y	real	the destination bottom right
dst_p4x,dst_p4y	real	the destination bottom left
blendmode	int	0 noblend, 1 source - See here for the full set canvasSetBrushBlendMode
samplemode	int	0 default linear, 1 nearest neighbor for hard edges images like barcodes

Example

registerAction('canvasStampImageWarpTest', '', 'canvasStampImageWarpTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasStampImageWarpTest(canvas, canvas2) {
    var pixelWidth = canvasGetWidth(canvas2);
    var pixelHeight = canvasGetHeight(canvas2);
    canvasStampImageWarp(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 200, 0, 150, 150, 40, 200);
}

---

canvasStampKernel(canvas, canvas_src, src_x,src_y, src_width,src_height, dst_x,dst_y, mode, divider, k1,k2,k3,k4,k5,k6,k7,k8,k9)

canvasStampKernel stamps the canvas_src onto the canvas using the 3x3 kernel. This is great for simple blur, edge detect and emboss effects
None (0, 0, 0, 0, 1, 0, 0, 0, 0) / 1
Average (1, 1, 1, 1, 1, 1, 1, 1, 1) / 9
Edge Vertical (-1, 0, 1, -1, 0, 1, -1, 0, 1) / 1
Edge Horizontal (-1, -1, -1, 0, 0, 0, 1, 1, 1) / 1
Sobel Horizontal (-1, 0, 1, -2, 0, 2, -1, 0, 1) / 1
lap edge ( 0, -1, 0, -1, 4, -1, 0, -1, 0 ) / 1
lap sharpen (0, -1, 0, -1, 5, -1, 0, -1, 0) / 1
emboss (-2, -1, 0, -1, 1, 1, 0, 1, 2) / 1
gaussian (1, 2, 1, 2, 4, 2, 1, 2, 1) / 16

Parameters:

Name	Type	Description
canvas	component	the target canvas
canvas_src	component	the source canvas
src_x,src_y	int	the source top left
src_width,src_height	int	the source width and height
dst_x,dst_y	int	the destination position top left
mode	int	0 just RGB, 1 RGB copy A from source, 2 RGB copy A from source where not zero, 3 Red only, 4 Green only, 5 Blue only, 6 Alpha only
divider	real	sum all of the 3x3 kernel then divide by this value
k1,k2,k3,k4,k5,k6,k7,k8,k9	int	the three by three kernel

Example

//the source and destination canvases need to be different otherwise it doesn't work.
registerAction('canvasStampKernelTest', '', 'canvasStampKernelTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasStampKernelTest(canvas, canvas2) {
    var pixelWidth = canvasGetWidth(canvas2);
    var pixelHeight = canvasGetHeight(canvas2);
    canvasStampKernel(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 1, 2, 3);
}

---

canvasStampLighting(canvas, canvas_src, src_x,src_y, src_width,src_height, dst_x,dst_y, brightness, contrast, shadow, fill, highlight, temperature)

canvasStampLighting stamp a source canvas region onto the target canvas while applying lighting

Parameters:

Name	Type	Description
canvas	component	the target canvas
canvas_src	component	the source canvas
src_x,src_y	int	the source top left
src_width,src_height	int	the source width and height
dst_x,dst_y	int	the destination position top left
brightness	real	(-1 to 1) -1 = black, 0 = unmodified, 1 = white
contrast	real	(-1 to 1) -1 = no contrast / grey, 0 = unmodified, 1 = high contrast
shadow	real	(-1 to 1) -1 = shadow reduced, 0 = unmodified, 1 = shadow increased
fill	real	(-1 to 1) -1 = fill light reduced, 0 = unmodified, 1 = fill light increased
highlight	real	(-1 to 1) -1 = highlights reduced / grey, 0 = unmodified, 1 = highlights increased
temperature	real	(-1 to 1) -1 = warm / red, 0 = unmodified, 1 = cool / blue

Example

registerAction('canvasStampLightingTest', '', 'canvasStampLightingTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasStampLightingTest(canvas, canvas2) {
    var pixelWidth = canvasGetWidth(canvas2);
    var pixelHeight = canvasGetHeight(canvas2);
    canvasStampLighting(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5);
}

---

canvasStampMinmaxBlend(canvas, canvas_src, src_x,src_y, src_width,src_height, dst_x,dst_y, min_blend, max_blend)

canvasStampMinmaxBlend combines a target image with a source image. This is a minimum and maximum clamp in pixel brighness
where the least extreme of the two images is sampled from. It assumes both images are of the same scene but with different lighting.
This is designed to take multiple photos of the same subject and remove extremes like shadow and bright reflections.

Parameters:

Name	Type	Description
canvas	component	the target canvas
canvas_src	component	the source canvas
src_x,src_y	int	the source top left
src_width,src_height	int	the source width and height
dst_x,dst_y	int	the destination position top left
min_blend	int	(0 to 255) if one of the pixels is < min_blend brightness then take the brightst (remove the extreme e.g. unlit shadow areas)
max_blend	int	(0 to 255) if one of the pixels is > max_blend brightness then take the darkest (remove extreme e.g. glare)

Example

//this needs certain images to be able to blend. Some image pairs just takes one or the other and does not blend. apple and ofice pics work.
registerAction('canvasStampMinmaxBlendTest', '', 'canvasStampMinmaxBlendTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasStampMinmaxBlendTest(canvas, canvas2) {
    var pixelWidth = canvasGetWidth(canvas2);
    var pixelHeight = canvasGetHeight(canvas2);
    canvasStampMinmaxBlend(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 0.2, 10, 0.5);
}

---

canvasStampMorphological(canvas, canvas_src, src_x,src_y, src_width,src_height, dst_x,dst_y, mode, operator)

canvasStampMorphological stamps the canvas_src onto the canvas using a morphological operator. Normally these are used for binary images,
but these operators are designed to work on RGB images. These operations are designed to be stacked, bounced from one buffer to another.
For example the common open operation is dilate followed by erode. Meanwhile close is erode followed by dilate.

Parameters:

Name	Type	Description
canvas	component	the target canvas
canvas_src	component	the source canvas
src_x,src_y	int	the source top left
src_width,src_height	int	the source width and height
dst_x,dst_y	int	the destination position top left
mode	int	0 just RGB, 1 RGB copy A from source, 2 RGB copy A from source where not zero, 3 Red only, 4 Green only, 5 Blue only, 6 Alpha only
operator	int	0 threshold, 1 erode, 2 dilate, 3 gradient, 4 boundary, 5 hit and miss corner, 6 thinning

Example

//the source and destination canvases need to be different otherwise it doesn't work.
registerAction('canvasStampMorphologicalTest', '', 'canvasStampMorphologicalTest', 'component:Canvas:canvas,component:Canvas2:canvas');
function canvasStampMorphologicalTest(canvas, canvas2) {
    var pixelWidth = canvasGetWidth(canvas2);
    var pixelHeight = canvasGetHeight(canvas2);
    canvasStampMorphological(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 1, 2, 128);
}

---

canvasStampQr(canvas, code, x, y, angle, size, codelevel)

canvasStampQr creates and stamps a QRcode onto the canvas.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
code	string	the text/numbers to encode.
x	real	the x position for the top left of where to put the QR code.
y	real	the y position for the top left of where to put the QR code.
angle	real	the angle in degrees.
size	real	size from 1-100 pixels per bar.
codelevel	int	Redundancy level, 1=low, 4=medium, 7=high.

Example

registerAction('canvasStampQrTest', '', 'canvasStampQrTest', 'component:Canvas:canvas');
function canvasStampQrTest(canvas) {
    canvasStampQr(canvas, "QRCODE", 250, 250, 0, 19, 1);
}

---

canvasStampSvg(canvas, x, y, xratio,yratio, angle)

canvasStampSvg stamp an SVG that had been preloaded with canvasPrepareSvg onto the canvas.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
x	real	the x position for the top left of where to put the svg.
y	real	the y position for the top left of where to put the svg.
xratio,yratio	real	the scale width and height.
angle	real	the angle in degrees.

Example

registerAction('canvasStampSvgTest', '', 'canvasStampSvgTest', 'component:Canvas:canvas');
function canvasStampSvgTest(canvas) {
    canvasStampSvg(canvas, 0, 0, 0.5, 0.5, 90);
}

---

canvasToTexture(canvas, output_texture)

canvasToTexture sends the canvas image to the texture target on the GPU for 3D rendering. You cannot access a texture object and so cannot use canvasToTexture without using a Renderkit.

Parameters:

Name	Type	Description
canvas	component	the target canvas.
output_texture	int	the target texture.

---

canvasTranslateTransform(canvas, x, y)

canvasTranslateTransform updates the transform translation for the current path - this will be applied during canvasDrawPathFill or canvasDrawPathStroke

Parameters:

Name	Type	Description
canvas	component	the target canvas.
x	real	the translation in the x direction (can be negative or positive).
y	real	the translation in the y direction (can be negative or positive).

Example

registerAction('canvasTranslateTransformTest', '', 'canvasTranslateTransformTest', 'component:Canvas:canvas');
function canvasTranslateTransformTest(canvas) {
    //draw normal shape
    setProperty(canvas, 'stroke_style', '#FF0000FF');
    setProperty(canvas, 'line_width', 4);
    canvasBeginPath(canvas);
    canvasAddRoundedRect(canvas, 200, 100, 100, 100, 20);
    canvasDrawPathStroke(canvas);
    //draw translated shape
    setProperty(canvas, 'stroke_style', '#FF0000FF');
    setProperty(canvas, 'line_width', 4);
    canvasBeginPath(canvas);
    canvasTranslateTransform(canvas, 100, 100); //applies translation in pixels
    canvasAddRoundedRect(canvas, 200, 100, 100, 100, 20);
    canvasDrawPathStroke(canvas);
    canvasResetTransform(canvas); //removes the transform translation for future operations.
}