JS Canvas – Umajin Developer

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.

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

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

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

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

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,y`	real	ellipse position
`rx,ry`	real	x and y radiuses (a circle if the same)

Example

//draw a merged magenta elipse
canvasBeginPath(canvas)
canvasAddEllipse(canvas,580,110,100,80)
canvasSetBrushColor(canvas,0xFF22FFFF)
canvasSetBrushBlendMode(canvas,17)
canvasDrawPathFill(canvas)

canvasAddLine(canvas, x,y)

canvasAddLine a line from the current position to the new one on a path

Parameters:

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

canvasAddMove(canvas, x,y)

canvasAddMove a move to a new position without drawing on a path

Parameters:

Name	Type	Description
`canvas`	component	the target canvas
`x,y`	real	new 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

//draw a solid red rounded rect
canvasAddRoundedRect(canvas,10,10,200,200,5)
canvasSetBrushColor(canvas,0xFF0000FF)
canvasDrawPathFill(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,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

//draw two blue wedges
canvasBeginPath(canvas)
canvasAddWedge(canvas,180,110,100,80,20,60,0.3)
canvasAddWedge(canvas,180,110,100,80,200,240,0.3)
canvasSetBrushColor(canvas,0x0000FFFF)
canvasDrawPathFill(canvas)

canvasAutoBrightnessContrast(canvas)

canvasAutoBrightnessContrast Automatically calculate and apply the maximum brightness and contrast

Parameters:

Name	Type	Description
`canvas`	component	the target canvas

canvasAutoColor(canvas)

canvasAutoBrightnessContrast Automatically calculate and apply strong color saturation/balance

Parameters:

Name	Type	Description
`canvas`	component	the target canvas

canvasBeginPath(canvas)

canvasBeginPath clear out the path buffer ready to add new commands

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

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

canvasBoxBlurRegion blurs a region on the canvas

Parameters:

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

canvasCalcPnsr(canvas, othercanvas)

canvasCalcPnsr 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

var psnr = canvasCalcPnsr(canvas, othercanvas)

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

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 1, 0 red, .25 green, .5 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

canvasClosePath(canvas)

canvasClosePath closing a path can be useful for some fill modes but is generally not required

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

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

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

var canvas = createComponent(self, "canvas", 0, 0, 100, 100)
canvasCreateNew(canvas,'',1920,1080,0xFFFFFF00)
var sz = canvasCreateNew(canvas_src,'demo_flower2.png',0,0,0xFFFFFF00)
sz = JSON.parse(sz)

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

canvasCrop crop and resize the canvas

Parameters:

Name	Type	Description
`canvas`	component	the target canvas
`x,y`	int	top left corner
`w,h`	int	the width and height of the area to be cropped

Example

canvasCrop(canvas, 10, 10, canvasGetWidth(canvas)-20, canvasGetHeight(canvas)-20)

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

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

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

img_src.canvasDetectSegments(canvas,result_canvas,100,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,y`	int	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

canvasDrawPathStroke(canvas)

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

Parameters:

Name	Type	Description
`canvas`	component	the target 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,y`	real	the position of the top left corner
`width`	real	the maximum width for the text to render into

Example

canvasSetBrushColor(canvas,0x000033FF)
canvasSetFontFilename(canvas,"vera.ttf")
canvasSetFontHeight(canvas,60)
canvasDrawTextFill(canvas,"Solid",10,500,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,y`	real	the position of the top left corner
`width`	real	the maximum width for the text to render into

Example

canvasSetStrokeWidth(canvas,3)
canvasSetBrushColor(canvas,0x000033FF)
canvasSetFontFilename(canvas,"vera.ttf")
canvasSetFontHeight(canvas,60)
canvasDrawTextStroke(canvas,"Outline",10,500,1000)

canvasFlipHorizontal(canvas)

canvasFlipHorizontal flip the target canvas horizontally

Parameters:

Name	Type	Description
`canvas`	component	the target canvas

canvasFlipVertical(canvas)

canvasFlipVertical flip the target canvas vertically

Parameters:

Name	Type	Description
`canvas`	component	the target canvas

canvasGetHeight(canvas)

canvasGetHeight gets the canvas height

Parameters:

Name	Type	Description
`canvas`	component	target canvas

Returns:

height - the canvas height

Type: int

canvasGetPixel(canvas, x,y)

canvasGetPixel gets a pixel color from the current canvas

Parameters:

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

Returns:

color - pixel RGBA color

Type: color

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

canvasGetWidth(canvas)

canvasGetWidth gets the canvas width

Parameters:

Name	Type	Description
`canvas`	component	target canvas

Returns:

width - the canvas width

Type: int

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

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

Parameters:

Name	Type	Description
`canvas`	component	the target canvas

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, (-1 to 1), each .25 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

canvasInvert(canvas)

canvasInvert inverts the colors in the current canvas

Parameters:

Name	Type	Description
`canvas`	component	the canvas to invert

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

canvasPrepareSvg(canvas, filename, svgdata)

canvasPrepareSvg preload an SVG ready to be stamped onto the canvas canvasStampSvg

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

canvasReadAprilTags(canvas)

canvasReadAprilTags reads april tags on the canvas

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

var tags = canvasReadAprilTags(canvas)
tags = JSON.parse(tags)
canvasSetBrushColor(canvas,0xFF0000FF)
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 reads a potential barcode on the canvas

Parameters:

Name	Type	Description
`canvas`	canvas	target canvas

Returns:

code - the data encoded

Type: string

Example

var code = canvasReadBarcode(canvas)

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

var code = canvasReadQrcode(canvas)

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

canvasResetTransform(canvas)

canvasResetTransform updates the transform back to it's default value (unity)

Parameters:

Name	Type	Description
`canvas`	component	the target canvas

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

canvasResize resize the canvas

Parameters:

Name	Type	Description
`canvas`	component	the target canvas
`w,h`	int	the width and 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

canvasResize(canvas, canvasGetWidth(canvas)/2.0, canvasGetHeight(canvas)/2.0, 1, 1)

canvasRotate(canvas, angle)

canvasRotate rotate the canvas

Parameters:

Name	Type	Description
`canvas`	component	the target canvas
`angle`	real	the angle to rotate in degrees

Example

canvasRotate(canvas, 180)

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

canvasSaveAs(canvas, filename, quality)

canvasSaveAs save an image from the canvas 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

canvasSaveAs(canvas, "test.png", 1)
canvasSaveAs(canvas, "test.jpg", 0.8)

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)

canvasSetBrushAngle(canvas, angle)

canvasSetBrushAngle sets the brush angle for image mode operations like canvasDrawPathStroke and canvasDrawPathFill

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

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

Parameters:

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

canvasSetBrushGradientEnd(canvas, color_start)

canvasSetBrushGradientEnd sets the brush end gradient color for operations like canvasDrawPathStroke and canvasDrawPathFill

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

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

canvasSetBrushPointSample(canvas, pointsamplemode)

canvasSetBrushPointSample sets the brush to pointsample - this is used for sampling barcodes and other hard edged images

Parameters:

Name	Type	Description
`canvas`	component	the target canvas
`pointsamplemode`	int	normally 0 set to 1 for barcodes and other hard edged images

canvasSetBrushPosition(canvas, x,y)

canvasSetBrushPosition sets the brush position for image mode operations like canvasDrawPathStroke and canvasDrawPathFill

Parameters:

Name	Type	Description
`canvas`	component	the target canvas
`x,y`	real	the image x and y position

canvasSetBrushScale(canvas, sx,sy)

canvasSetBrushScale sets the brush scale for image mode operations like canvasDrawPathStroke and canvasDrawPathFill

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

canvasSetBrushSourceBottomRight(canvas, x,y)

canvasSetBrushSourceBottomRight sets the brush bottom right clip for image mode operations like canvasDrawPathStroke and canvasDrawPathFill

Parameters:

Name	Type	Description
`canvas`	component	the target canvas
`x,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

Parameters:

Name	Type	Description
`canvas`	component	the target canvas
`x,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

canvasSetFontHeight(canvas, height)

canvasSetFontFilename sets the font height for operations like canvasDrawTextStroke and canvasDrawTextFill

Parameters:

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

canvasSetPixel(canvas, x,y, color)

canvasSetPixel sets a pixel color on the current canvas

Parameters:

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

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

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

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)

canvasSmoothPath(canvas, steps)

canvasSmoothPath converts lines on a path into bezier's

Parameters:

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

Example

canvasResetColor(canvas,0x448844FF)
canvasBeginPath(canvas)
canvasSetBrushColor(canvas,0xFFFFFFFF)
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)

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

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

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

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,y`	real	the position
`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

canvasSetBrushPointSample(canvas,-1)
canvasStampBarcode(canvas, "Aztec",200,400,0,17,1,0)
canvasStampBarcode(canvas, "PDF417",1260,200,0,8,1024,0)
canvasStampBarcode(canvas, "QRCODE",1260,700,0,19,2048,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

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 1, 0 red, .25 green, .5 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

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

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,src_y`	real	the source position
`src_width,src_height`	real	the size
`dst_x,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, (-1 to 1), each .25 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

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

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

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

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

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

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

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)

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

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

canvasStampQr stamp QRcode onto the canvas

Parameters:

Name	Type	Description
`canvas`	component	the target canvas
`code`	string	the text/numbers to encode
`x,y`	real	the position
`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

canvasStampQr(canvas, "QRCODE",1260,700,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,y`	real	the position
`xratio,yratio`	real	the scale width and height
`angle`	real	the angle in degrees

Example

canvasPrepareSvg(canvas,"tiger.svg","")
canvasStampSvg(canvas,150,10,1,1,0)
canvasStampSvg(canvas,150,10,0.5,0.5,45)
canvasPrepareSvg(canvas,"umajin.svg","")
canvasStampSvg(canvas,370,390,0.2,0.2,0)

canvasToTexture(canvas, output_texture)

canvasToTexture sends the canvas image to the texture target on the GPU for 3D rendering

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,y`	string	the translation in the x and y directions (can be negative or positive)

Global

Members

Canvas_Overview

Methods

canvasAdaptiveThreshold(canvas, strength, radius, blend)

Parameters:

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

Parameters:

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

Parameters:

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

Parameters:

Example

canvasAddLine(canvas, x,y)

Parameters:

canvasAddMove(canvas, x,y)

Parameters:

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

Parameters:

Example

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

Parameters:

Example

canvasAutoBrightnessContrast(canvas)

Parameters:

canvasAutoColor(canvas)

Parameters:

canvasBeginPath(canvas)

Parameters:

canvasBoxBlur(canvas, radius)

Parameters:

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

Parameters:

canvasCalcPnsr(canvas, othercanvas)

Parameters:

Example

canvasCalculateTextWidth(canvas, text)

Parameters:

Returns:

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

Parameters:

canvasClosePath(canvas)

Parameters:

canvasCopyBuffer(canvas, canvas_src)

Parameters:

canvasCreateNew(filename, width, height, color)

Parameters:

Returns:

Example

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

Parameters:

Example

canvasDashAdd(canvas, on_length, off_length)

Parameters:

canvasDashClear(canvas)

Parameters:

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

Parameters:

Returns:

Example

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

Parameters:

Example

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

Parameters:

Returns:

Example

canvasDrawPathFill(canvas)

Parameters:

canvasDrawPathStroke(canvas)

Parameters:

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

Parameters:

Example

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

Parameters:

Example

canvasFlipHorizontal(canvas)

Parameters:

canvasFlipVertical(canvas)