• References
    • Main
    • RenderKit
    • LibJS
    • Canvas
  • Components
    • Overview
    • Page
    • Basic
      • Rectangle
      • Text
      • Button
      • HTML Article
      • Toggle Button
      • Tiler
      • Web View
      • Image Zoomer
    • Navigation
      • Carousel
    • Forms
      • Form
      • Text Entry
    • Layout
      • Group
  • Web API
  • Tutorials
  • Contact
Menu
  • References
    • Main
    • RenderKit
    • LibJS
    • Canvas
  • Components
    • Overview
    • Page
    • Basic
      • Rectangle
      • Text
      • Button
      • HTML Article
      • Toggle Button
      • Tiler
      • Web View
      • Image Zoomer
    • Navigation
      • Carousel
    • Forms
      • Form
      • Text Entry
    • Layout
      • Group
  • Web API
  • Tutorials
  • Contact

    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.

    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)

    • Developer Home
    • Umajin Home
    • Support Home
    Menu
    • Developer Home
    • Umajin Home
    • Support Home