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

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

    canvasCreateNew canvasCreateNew
    canvasGetWidth canvasGetWidth
    canvasGetHeight canvasGetHeight

    Coordinates

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

    Drawing

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

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

    canvasBeginPath canvasBeginPath
    canvasClosePath canvasClosePath
    canvasSmoothPath canvasSmoothPath turns lines into curves

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

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

    Paths can be manipulated with the following transforms:

    canvasResetTransform canvasResetTransform
    canvasRotateTransform canvasRotateTransform
    canvasSkewTransform canvasSkewTransform
    canvasScaleTransform canvasScaleTransform
    canvasTranslateTransform canvasTranslateTransform

    The drawing commands are then rasterized using:

    canvasDrawPathStroke canvasDrawPathStroke
    canvasDrawPathFill canvasDrawPathFill

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

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

    Brushes can have gradients as follows:

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

    Strokes can have dashes added as follows:

    canvasDashClear canvasDashClear
    canvasDashAdd canvasDashAdd

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

    canvasSetfontFilename canvasSetfontFilename
    canvasSetfontHeight canvasSetfontHeight
    canvasCalculateTextWidth canvasCalculateTextWidth
    canvasDrawTextStroke canvasDrawTextStroke
    canvasDrawTextFill canvasDrawTextFill

    Full Canvas Operations

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

    Bitmap Operations

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

    Detectors

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

    I/O functions

    canvasGetPixel canvasGetPixel
    canvasSetPixel canvasSetPixel
    canvasSaveAs canvasSaveAs
    canvasToTexture canvasToTexture

    Methods


    canvasAdaptiveThreshold(canvas, strength, radius, blend)

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

    component

    the target canvas
    strength

    real

    -1 to 1 how strong the threshold is towards binary
    radius

    int

    1 to 1000 how wide the radius to check for local contrast
    blend

    real

    0 to 1 how much of the image is preserved vs thresholded (0.5 is a common value)
    Example
    registerAction('canvasAdaptiveThresholdTest', '', 'canvasAdaptiveThresholdTest', 'component:Canvas:canvas');
    function canvasAdaptiveThresholdTest(canvas) {
        canvasAdaptiveThreshold(canvas, 0.2, 10, 0.5);
    }

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

    canvasAddBezier3 Adds a parabolic Bezier curve (one control point) to the current path
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    x1,y1

    real

    start point.
    x2,y2

    real

    control point.
    x3,y3

    real

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

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

    canvasAddBezier4 Adds a cubic Bezier curve (two control points) to the current path.
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    x1,y1

    real

    start point.
    x2,y2

    real

    control point 1.
    x3,y3

    real

    control point 2.
    x4,y4

    real

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

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

    canvasAddEllipse an ellipse at the x/y position with radiuses rx,ry added to the path
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    x

    real

    ellipse position.
    y

    real

    ellipse position.
    rx,ry

    real

    x and y radiuses (a circle if the same).
    Example
    registerAction('canvasAddEllipseTest', '', 'canvasAddEllipseTest', 'component:Canvas:canvas');
    function canvasAddEllipseTest(canvas) {
        setProperty(canvas, 'stroke_style', '#FF0000');
        setProperty(canvas, 'line_width', 4);
        canvasBeginPath(canvas);
        canvasAddEllipse(canvas,200, 200, 50, 200, 50);
        canvasDrawPathStroke(canvas);
    }

    canvasAddLine(canvas, x, y)

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

    component

    the target canvas.
    x

    real

    new position.
    y

    real

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

    canvasAddMove(canvas, x, y)

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

    component

    the target canvas.
    x

    real

    new x position.
    y

    real

    new y position.

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

    canvasAddRoundedRect a rounded rectangle from x1/y1 to x2/y2 with curved corners of radius is added to the path
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    x1,y1

    real

    top left corner of the rectangle.
    x2,y2

    real

    bottom right corner of the rectangle.
    radius

    real

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

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

    canvasAddWedge a part of an ellipse with an inner and outer radius and starting and ending angle in degrees is added to the path
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    x

    real

    center of the wedge.
    y

    real

    center of the wedge.
    rx,ry

    real

    x and y radiuses (a circle if the same).
    a1,a2

    real

    starting and ending angle in degrees.
    thickness_ratio

    real

    0 is no thickness (just follows the circumference), 1 is a wedge right to the center of the ellipse, 0.5 is halfway.
    Example
    registerAction('canvasAddWedgeTest', '', 'canvasAddWedgeTest', 'component:Canvas:canvas');
    function canvasAddWedgeTest(canvas) {
        setProperty(canvas, 'stroke_style', '#FF0000');
        setProperty(canvas, 'line_width', 4);
        canvasBeginPath(canvas);
        canvasAddWedge(canvas, 350, 350, 100, 100, 0, 90, 5); //degrees
        canvasDrawPathStroke(canvas);
    }

    canvasAutoBrightnessContrast(canvas)

    canvasAutoBrightnessContrast Automatically calculate and apply the maximum brightness and contrast
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    Example
    registerAction('canvasAutoBrightnessContrastTest', '', 'canvasAutoBrightnessContrastTest', 'component:Canvas:canvas');
    function canvasAutoBrightnessContrastTest(canvas) {
        canvasAutoBrightnessContrast(canvas);
    }

    canvasAutoColor(canvas)

    canvasAutoBrightnessContrast Automatically calculate and apply strong color saturation/balance
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    Example
    registerAction('canvasAutoColorTest', '', 'canvasAutoColorTest', 'component:Canvas:canvas');
    function canvasAutoColorTest(canvas) {
        canvasAutoColor(canvas);
    }

    canvasBeginPath(canvas)

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

    component

    the target canvas.

    canvasBoxBlur(canvas, radius)

    canvasBoxBlur blurs the canvas
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    radius

    int

    radius of the blur in pixels.
    Example
    registerAction('canvasBoxBlurTest', '', 'canvasBoxBlurTest', 'component:Canvas:canvas');
    function canvasBoxBlurTest(canvas) {
        canvasBoxBlur(canvas, 30);
    }

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

    canvasBoxBlurRegion blurs a region on the canvas
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    x

    int

    top left corner of the region.
    y

    int

    top left corner of the region.
    w,-

    int

    width of the region.
    h

    int

    height of the region.
    radius

    int

    radius of the blur in pixels.
    Example
    registerAction('canvasBoxBlurRegionTest', '', 'canvasBoxBlurRegionTest', 'component:Canvas:canvas');
    function canvasBoxBlurRegionTest(canvas) {
        canvasBoxBlurRegion(canvas, 100, 100, 400, 400, 30);
    }

    canvasCalcPsnr(canvas, othercanvas)

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

    component

    the target canvas.
    othercanvas

    component

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

    canvasCalculateTextWidth(canvas, text)

    canvasCalculateTextWidth the specified text width is calculated without rendering
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    text

    string

    the text to render.
    Returns:
    width - the width of the text if it was rendered.
    Type

    real

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

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

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

    component

    the target canvas
    hue

    real

    the color converted to hue (hsv) from 0 to 360, 0 red, 90 green, 180 blue
    hue_mask

    real

    the hue tollerance to generate the mask, 0 to 1, 0.1 or 0.06 are good values
    luminance_mask

    real

    the amount of luminance tollerance, 0 to 5, 1.5 is a good value
    mask_shadow

    real

    the amount of shadow preserved, 0 to 5, 2.6 is a good value, smaller means less shadow is added
    mask_light

    real

    the amount of saturated color preserved, 0 to 5, 0.9 is a good value, more means more highlights may be picked up
    Example
    registerAction('canvasChromaKeyTest', '', 'canvasChromaKeyTest', 'component:Canvas:canvas');
    function canvasChromaKeyTest(canvas) {
        canvasChromaKey(canvas, 90, 0.06, 1.5, 2.6, 0.9);
    }

    canvasClosePath(canvas)

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

    component

    the target canvas.

    canvasCopyBuffer(canvas, canvas_src)

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

    component

    the target canvas.
    canvas_src

    component

    the source canvas.

    canvasCreateNew(filename, width, height, color)

    canvasCreateNew refreshes the canvas with a new image buffer. This resets the canvas removing any previous drawing on the canvas.
    Parameters:
    Name Type Description
    filename

    string

    optional image, png, jpg, bmp or svg.
    width

    int

    default width (used for svg or if no filename).
    height

    int

    default height (used for svg or if no filename).
    color

    color

    default color (used for svg or if no filename).
    Returns:
    width,height - the size of buffer allocated.
    Type

    json

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

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

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

    component

    the target canvas.
    x

    int

    the x position for the top left of where to crop.
    y

    int

    the y position for the top left of where to crop.
    w

    int

    the width of the area to be cropped.
    h

    int

    the height of the area to be cropped.
    Example
    registerAction('canvasCropTest', '', 'canvasCropTest', 'component:Canvas:canvas');
    function canvasCropTest(canvas) {
        canvasCrop(canvas, 100, 100,200,200);
    }

    canvasDashAdd(canvas, on_length, off_length)

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

    component

    the target canvas.
    on_length

    real

    length of dash in pixels.
    off_length

    real

    length of the gap in pixels.

    canvasDashClear(canvas)

    canvasDashClear clears any dashes for stroke operations like canvasDrawTextStroke and canvasDrawPathStroke
    Parameters:
    Name Type Description
    canvas

    component

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

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

    canvasDetectBlobs looks for pixel connected blobs which match a specific color
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    r_similarity,g_similarity,b_similarity

    int

    from 0 to 255 the 8 bit range (0 is an exact match, 255 matches all).
    blob_min_width

    int

    the minium pixel width to be considered a blob (2 or higher).
    blob_min_size

    int

    the minimum pixel count to be considered a blob (4 or higher).
    visualise

    int

    if true lets you see the matches on the source canvas.
    Returns:
    blobs - for each blob the x,y,total is recorded
    Type

    json

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

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

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

    component

    the target canvas.
    dst_canvas

    component

    the canvas to hold the result.
    num_elements

    int

    the number of superpixels (2 or higher).
    compactness

    real

    0 to 100, the super pixels tendancy to circularity (10 is a common value).
    visualise

    int

    if true lets you see the segments on the source canvas.
    Example
    registerAction('canvasDetectSegmentsTest', '', 'canvasDetectSegmentsTest', 'component:Canvas:canvas,component:Canvas2:canvas');
    function canvasDetectSegmentsTest(canvas, canvas2) {
        canvasDetectSegments(canvas, canvas2, 200, 10, 1);
    }

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

    canvasDetectSlidingTemplate slides a template over the canvas returning the best matching value and position for each template
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    canvas_template

    component

    the template canvas.
    template_x_count

    int

    the canvas_template can have one or more templates left to right, they must all be the same width.
    x

    int

    the x coordinate for the spot on the canvas to match the templates against.
    y

    int

    the y coordinate for the spot on the canvas to match the templates against.
    slidex,slidey

    int

    the number of pixels to slide in x and y to test the templates.
    slide_step

    int

    by default 1 pixel, but can step in 2,3 or more pixel increments.
    Returns:
    template_matches - for each template the diff,x,y where the difference is the best match and x,y is the template position
    Type

    json

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

    canvasDrawPathFill(canvas)

    canvasDrawPathFill the current path is drawn with the current brush in fill mode (fill in the middle)
    Parameters:
    Name Type Description
    canvas

    component

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

    canvasDrawPathStroke(canvas)

    canvasDrawPathStroke the current path is stroked with the current brush (draw the outside)
    Parameters:
    Name Type Description
    canvas

    component

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

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

    canvasDrawTextFill the specified text is drawn with the current brush in fill mode (fill in the middle)
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    text

    string

    the text to render.
    x

    real

    the position of the top left corner.
    y

    real

    the position of the top left corner.
    width

    real

    the maximum width for the text to render into.
    Example
    registerAction('canvasDrawTextFillTest', '', 'canvasDrawTextFillTest', 'component:Canvas:canvas');
    function canvasDrawTextFillTest(canvas) {
        setProperty(canvas, 'fill_style', '#FF0000FF');
        setProperty(canvas, 'font', '40px vera');
        canvasDrawTextFill(canvas, 'Hello World', 100, 100, 1000);
    }

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

    canvasDrawTextStroke the specified text is stroked with the current brush (draw the outside)
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    text

    string

    the text to render.
    x

    real

    the position of the top left corner.
    y

    real

    the position of the top left corner.
    width

    real

    the maximum width for the text to render into.
    Example
    registerAction('canvasDrawTextStrokeTest', '', 'canvasDrawTextStrokeTest', 'component:Canvas:canvas');
    function canvasDrawTextStrokeTest(canvas) {
        setProperty(canvas, 'stroke_style', '#FF0000FF');
        setProperty(canvas, 'font', '40px vera');
        setProperty(canvas, 'line_width', 2);
        canvasDrawTextStroke(canvas, 'Hello World', 100, 100, 1000);
    }

    canvasFlipHorizontal(canvas)

    canvasFlipHorizontal flip the target canvas horizontally.
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    Example
    registerAction('canvasFlipHorizontalTest', '', 'canvasFlipHorizontalTest', 'component:Canvas:canvas');
    function canvasFlipHorizontalTest(canvas) {
        canvasFlipHorizontal(canvas);
    }

    canvasFlipVertical(canvas)

    canvasFlipVertical flips the target canvas vertically.
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    Example
    registerAction('canvasFlipVerticalTest', '', 'canvasFlipVerticalTest', 'component:Canvas:canvas');
    function canvasFlipVerticalTest(canvas) {
        canvasFlipVertical(canvas);
    }

    canvasGetHeight(canvas)

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

    component

    target canvas.
    Returns:
    height - the canvas height.
    Type

    int

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

    canvasGetPixel(canvas, x, y)

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

    component

    the canvas to read from.
    x

    int

    pixel x position.
    y

    int

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

    canvasGetPixelData(canvas)

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

    component

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

    canvasGetWidth(canvas)

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

    component

    target canvas.
    Returns:
    width - the canvas width.
    Type

    int

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

    canvasGradientAddPoint(canvas, color, position)

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

    component

    the target canvas.
    color

    color

    the color point to add.
    position

    int

    from 1 to 254 (e.g. 128 will be a middle color between the start and end colors).

    canvasGradientClear(canvas)

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

    component

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

    canvasHsv(canvas, hue, saturation, value)

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

    component

    the target canvas
    hue

    real

    0 no change, (-180 to 180), each 90 plus and minus is a change in RGB hue
    saturation

    real

    0 no change, (-1 to 1) -1 = desaturated, 1 = saturated
    value

    real

    0 no change, (-1 to 1) -1 = dark, 1 = bright
    Example
    registerAction('canvasHsvTest', '', 'canvasHsvTest', 'component:Canvas:canvas');
    function canvasHsvTest(canvas) {
        canvasHsv(canvas, 90, 0.5, 0.5);
    }

    canvasInvert(canvas)

    canvasInvert inverts the colors in the canvas.
    Parameters:
    Name Type Description
    canvas

    component

    the canvas to invert.
    Example
    registerAction('canvasInvertTest', '', 'canvasInvertTest', 'component:Canvas:canvas');
    function canvasInvertTest(canvas) {
        canvasInvert(canvas);
    }

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

    canvasLighting apply lighting to the canvas
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas
    brightness

    real

    (-1 to 1) -1 = black, 0 = unmodified, 1 = white
    contrast

    real

    (-1 to 1) -1 = no contrast / grey, 0 = unmodified, 1 = high contrast
    shadow

    real

    (-1 to 1) -1 = shadow reduced, 0 = unmodified, 1 = shadow increased
    fill

    real

    (-1 to 1) -1 = fill light reduced, 0 = unmodified, 1 = fill light increased
    highlight

    real

    (-1 to 1) -1 = highlights reduced / grey, 0 = unmodified, 1 = highlights increased
    temperature

    real

    (-1 to 1) -1 = warm / red, 0 = unmodified, 1 = cool / blue
    Example
    registerAction('canvasLightingTest', '', 'canvasLightingTest', 'component:Canvas:canvas');
    function canvasLightingTest(canvas) {
        canvasLighting(canvas, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5);
    }

    canvasPrepareSvg(canvas, filename, svgdata)

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

    component

    the target canvas.
    filename

    string

    the svg file from the images folder.
    svgdata

    string

    an alternative svg string to render.
    Returns:
    dimensions -JSON data of the top left and bottom right coordinates of the svg prepared.
    Type

    string

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

    canvasReadAprilTags(canvas)

    canvasReadAprilTags scans the canvas for april tags and tries to read in their data.
    Parameters:
    Name Type Description
    canvas

    component

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

    json

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

    canvasReadBarcode(canvas)

    canvasReadBarcode scans the canvas for a barcode and attempts to read in the data if it finds one.
    Parameters:
    Name Type Description
    canvas

    canvas

    target canvas.
    Returns:
    code - the data encoded in the barcode.
    Type

    string

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

    canvasReadQrcode(canvas)

    canvasReadQrcode reads a potential QR code on the canvas
    Parameters:
    Name Type Description
    canvas

    canvas

    target canvas.
    Returns:
    code - the data encoded.
    Type

    string

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

    canvasResetColor(canvas, color)

    canvasResetColor quickly updates the whole canvas to the specified color
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    color

    color

    the color to apply to the canvas.
    Example
    registerAction('canvasResetColorTest', '', 'canvasResetColorTest', 'component:Canvas:canvas');
    function canvasResetColorTest(canvas) {
        canvasResetColor(canvas, '0x448844FF');
    }

    canvasResetTransform(canvas)

    canvasResetTransform updates the transform back to it's default value (unity). Look at canvasRotateTransform for example code using this.
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.

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

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

    component

    the target canvas.
    w

    int

    the width to resize to.
    h

    int

    the height to resize to.
    horz_filter

    int

    0 nearest, 1 linear, 2 avg, 3 lanzcos.
    vert_filter

    int

    0 nearest, 1 linear, 2 avg, 3 lanzcos.
    Example
    registerAction('canvasResizeTest', '', 'canvasResizeTest', 'component:Canvas:canvas');
    function canvasResizeTest(canvas) {
        canvasResize(canvas, 100, 100, 0, 0);
    }

    canvasRotate(canvas, mode)

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

    component

    the target canvas.
    mode

    int

    Rotates the canvas by a given angle (0 = no rotate, 1 = 90 degrees, 2 = 180, 3 = 270).
    Example
    registerAction('canvasRotateTest', '', 'canvasRotateTest', 'component:Canvas:canvas');
    function canvasRotateTest(canvas) {
        canvasRotate(canvas, 1); //1 means 90 degrees
    }

    canvasRotateTransform(canvas, angle)

    canvasRotateTransform updates the transform rotation for the current path - this will be applied during canvasDrawPathFill or canvasDrawPathStroke
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    angle

    string

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

    canvasSaveAs(canvas, filename, quality)

    canvasSaveAs saves a render of the canvas as an image to storage.
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    filename

    string

    the path and filename with extension .png or .jpg.
    quality

    real

    the jpeg or png compression ratio from 0-1.
    Example
    registerAction('canvasSaveAsTest', '', 'canvasSaveAsTest', 'component:Canvas:canvas');
    function canvasSaveAsTest(canvas) {
        canvasSaveAs(canvas, 'test.png', 0.9);
    }

    canvasScaleTransform(canvas, sx,sy)

    canvasScaleTransform updates the transform scale for the current path - this will be applied during canvasDrawPathFill or canvasDrawPathStroke
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    sx,sy

    string

    the scale in the x and y directions (1 = normal scale, -1 = negative scale, 0.5 = half scale, 2.0 = double scale).
    Example
    registerAction('canvasScaleTransformTest', '', 'canvasScaleTransformTest', 'component:Canvas:canvas');
    function canvasScaleTransformTest(canvas) {
        //draw normal shape
        setProperty(canvas, 'stroke_style', '#FF0000FF');
        setProperty(canvas, 'line_width', 4);
        canvasBeginPath(canvas);
        canvasAddRoundedRect(canvas, 200, 100, 100, 100, 20);
        canvasDrawPathStroke(canvas);
        //draw scaled shape
        setProperty(canvas, 'stroke_style', '#FF0000FF');
        setProperty(canvas, 'line_width', 4);
        canvasBeginPath(canvas);
        canvasScaleTransform(canvas, 0.5, 0.5); //applies scale in percentage
        canvasAddRoundedRect(canvas, 200, 100, 100, 100, 20);
        canvasDrawPathStroke(canvas);
        canvasResetTransform(canvas); //removes the transform scale for future operations.
    }

    canvasSetBrushAngle(canvas, angle)

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

    component

    the target canvas.
    angle

    real

    the image angle in degrees.

    canvasSetBrushBlendMode(canvas, blendmode)

    canvasSetBrushBlendMode sets the brush mode for operations like canvasDrawPathStroke and canvasDrawPathFill
    Look at canvasStampBarcode for example code.
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    blendmode

    int

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

    canvasSetBrushColor(canvas, color)

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

    component

    the target canvas.
    color

    color

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

    canvasSetBrushGradientEnd(canvas, color_start)

    canvasSetBrushGradientEnd sets the brush end gradient color for operations like canvasDrawPathStroke and canvasDrawPathFill
    Look at canvasGradientClear for example code.
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    color_start

    color

    the end gradient color.

    canvasSetBrushGradientStart(canvas, color_start)

    canvasSetBrushGradientStart sets the brush start gradient color for operations like canvasDrawPathStroke and canvasDrawPathFill
    Look at canvasGradientClear for example code.
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    color_start

    color

    the start gradient color.

    canvasSetBrushMode(canvas, mode)

    canvasSetBrushMode sets the brush mode for operations like canvasDrawPathStroke and canvasDrawPathFill
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    mode

    int

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

    canvasSetBrushPointSample(canvas, pointsamplemode)

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

    component

    the target canvas.
    pointsamplemode

    bool

    Normally false, but set to true for barcodes and other hard edged images.

    canvasSetBrushPosition(canvas, x, y)

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

    component

    the target canvas.
    x

    real

    the image x position.
    y

    real

    the image y position.

    canvasSetBrushScale(canvas, sx,sy)

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

    component

    the target canvas.
    sx,sy

    real

    the image scale x and scale y.

    canvasSetBrushSource(canvas, canvas_source)

    canvasSetBrushSource sets the brush image source for operations like canvasDrawPathStroke and canvasDrawPathFill
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    canvas_source

    component

    the source canvas to use for the brush.
    Example
    registerAction('canvasSetBrushSourceTest', '', 'canvasSetBrushSourceTest', 'component:Canvas:canvas,component:Canvas2:canvas');
    function canvasSetBrushSourceTest(canvas, canvas2) {
        canvasBeginPath(canvas);
        canvasSetBrushSource(canvas, canvas2);
        canvasSetBrushSourceTopLeft(canvas, 100, 100);
        canvasSetBrushSourceBottomRight(canvas, 300, 300);
        canvasSetBrushMode(canvas, 2);
        canvasAddMove(canvas, 100, 100);
        canvasAddLine(canvas, 550, 100);
        canvasAddLine(canvas, 550, 550);
        canvasAddLine(canvas, 100, 550);
        canvasClosePath(canvas);
        canvasDrawPathFill(canvas);
    }

    canvasSetBrushSourceBottomRight(canvas, x, y)

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

    component

    the target canvas.
    x

    real

    the image bottom right clip position.
    y

    real

    the image bottom right clip position.

    canvasSetBrushSourceTopLeft(canvas, x, y)

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

    component

    the target canvas.
    x

    real

    the image top left clip position.
    y

    real

    the image top left clip position.

    canvasSetFontFilename(canvas, filename)

    canvasSetFontFilename sets the font for operations like canvasDrawTextStroke and canvasDrawTextFill
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    filename

    string

    the filename of a ttf or otf font in the project fonts folder.
    Example
    registerAction('canvasSetFontFilenameTest', '', 'canvasSetFontFilenameTest', 'component:Canvas:canvas');
    function canvasSetFontFilenameTest(canvas) {
        canvasSetFontFilename(canvas, "vera.ttf");
        canvasSetFontHeight(canvas, 60);
        setProperty(canvas, 'fill_style', '#FF0000FF');
        canvasDrawTextFill(canvas, 'Hello World', 100, 100, 1000);
    }

    canvasSetFontHeight(canvas, height)

    canvasSetFontFilename sets the font height for operations like canvasDrawTextStroke and canvasDrawTextFill
    Look at canvasSetFontFilename for example code.
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    height

    real

    the font height in pixels.

    canvasSetPixel(canvas, x, y, color)

    canvasSetPixel sets the color of the pixel at the given coordinates on the canvas to the specified color.
    Parameters:
    Name Type Description
    canvas

    component

    the canvas to update.
    x

    int

    pixel x position.
    y

    int

    pixel y position.
    color

    color

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

    canvasSetPixelData(canvas, data, format)

    canvasSetPixelData Sets new pixel data to the canvas in specified format
    Parameters:
    Name Type Description
    canvas

    component

    the canvas.
    data

    ArrayBuffer

    the pixel data.
    format

    int

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

    canvasSetStrokeCap(canvas, cap_type)

    canvasSetStrokeCap sets the brush cap for stroke operations like canvasDrawPathStroke
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    cap_type

    int

    the cap type 0 ButtCap, 1 SquareCap, 2 RoundCap.

    canvasSetStrokeInnerJoin(canvas, join_type)

    canvasSetStrokeInnerJoin sets the brush inner join for stroke operations like canvasDrawPathStroke
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    join_type

    int

    the join type 0 InnerBevel, 1 InnerMiter, 2 InnerJag, 3 InnerRound.

    canvasSetStrokeInnerMiterLimit(canvas, limit)

    canvasSetStrokeInnerMiterLimit sets the brush inner miter limit for stroke operations like canvasDrawPathStroke
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    limit

    real

    the inner miter limit in degrees.

    canvasSetStrokeJoin(canvas, join_type)

    canvasSetStrokeJoin sets the brush join for stroke operations like canvasDrawPathStroke
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    join_type

    int

    the join type 0 MiterJoin, 1 MiterJoinRevert, 2 RoundJoin, 3 BevelJoin, 4 MiterJoinRound.

    canvasSetStrokeMiterLimit(canvas, limit)

    canvasSetStrokeMiterLimit sets the brush miter limit for stroke operations like canvasDrawPathStroke
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    limit

    real

    the miter limit in degrees.

    canvasSetStrokeWidth(canvas, width)

    canvasSetStrokeWidth sets the brush width for stroke operations like canvasDrawPathStroke
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    width

    real

    the width in pixels of the stroke.
    Example
    registerAction('canvasSetStrokeWidthTest', '', 'canvasSetStrokeWidthTest', 'component:Canvas:canvas');
    function canvasSetStrokeWidthTest(canvas) {
        setProperty(canvas, 'stroke_style', '#FF0000FF');
        canvasSetStrokeWidth(canvas, 8);
        canvasBeginPath(canvas);
        canvasAddRoundedRect(canvas, 200, 100, 100, 100, 20);
        canvasDrawPathStroke(canvas);
    }

    canvasSkewTransform(canvas, sx,sy)

    canvasSkewTransform updates the transform skew for the current path - this will be applied during canvasDrawPathFill or canvasDrawPathStroke
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    sx,sy

    string

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

    canvasSmoothPath(canvas, steps)

    canvasSmoothPath converts lines on a path into a bezier curve.
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    steps

    real

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

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

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

    component

    the target canvas
    canvas_src

    component

    the source canvas
    src_x,src_y

    int

    the source top left
    src_width,src_height

    int

    the source width and height
    dst_x,dst_y

    int

    the destination position top left
    strength

    real

    -1 to 1 how strong the threshold is towards binary
    radius

    int

    1 to 1000 how wide the radius to check for local contrast
    blend

    real

    0 to 1 how much of the image is preserved vs thresholded (0.5 is a common value)
    Example
    registerAction('canvasStampAdaptiveThresholdTest', '', 'canvasStampAdaptiveThresholdTest', 'component:Canvas:canvas,component:Canvas2:canvas');
    function canvasStampAdaptiveThresholdTest(canvas, canvas2) {
        var pixelWidth = canvasGetWidth(canvas2);
        var pixelHeight = canvasGetHeight(canvas2);
        canvasStampAdaptiveThreshold(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 0.2, 10, 0.5);
    }

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

    canvasStampAutoBrightnessContrast stamp a source canvas region onto the target canvas while calculating and applying the maximum brightness and contrast
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    canvas_src

    component

    the source canvas.
    src_x,src_y

    int

    the source top left.
    src_width,src_height

    int

    the source width and height.
    dst_x,dst_y

    int

    the destination position top left.
    Example
    registerAction('canvasStampAutoBrightnessContrastTest', '', 'canvasStampAutoBrightnessContrastTest', 'component:Canvas:canvas,component:Canvas2:canvas');
    function canvasStampAutoBrightnessContrastTest(canvas, canvas2) {
        var pixelWidth = canvasGetWidth(canvas2);
        var pixelHeight = canvasGetHeight(canvas2);
        canvasStampAutoBrightnessContrast(canvas, canvas2, 0, 0, pixelWidth-1, pixelHeight-1, 0, 0);
    }

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

    canvasStampAutoColor stamp a source canvas region onto the target canvas while calculating and applying strong color saturation/balance
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas
    canvas_src

    component

    the source canvas
    src_x,src_y

    int

    the source top left
    src_width,src_height

    int

    the source width and height
    dst_x,dst_y

    int

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

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

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

    component

    the target canvas
    canvas_src

    component

    the source canvas
    src_x,src_y

    int

    the source top left
    src_width,src_height

    int

    the source width and height
    dst_x,dst_y

    int

    the destination position top left
    min_alpha

    int

    (0 to 255) can be used to stop the alpha from be averaged to zero
    Example
    registerAction('canvasStampAvgDeltaTest', '', 'canvasStampAvgDeltaTest', 'component:Canvas:canvas,component:Canvas2:canvas');
    function canvasStampAvgDeltaTest(canvas, canvas2) {
        var pixelWidth = canvasGetWidth(canvas2);
        var pixelHeight = canvasGetHeight(canvas2);
        canvasStampAvgDelta(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 0);
    }

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

    canvasStampBarcode stamp a 1D or 2D barcode onto the canvas.
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    code

    string

    the text/numbers to encode (note only some barcodes such as Aztec, QR, PDF417 support letters).
    x

    real

    the x position for the top left of where to put the barcode.
    y

    real

    the y position for the top left of where to put the barcode.
    angle

    real

    the angle in degrees.
    size

    real

    size from 1-100 pixels per bar.
    codetype

    int

    the barcode (Aztec=1, Codeabar=2, Code39=4, code93=8, code128=16, dataMatrix=32, EAN8=64, EAN13=128, ITF=256, Maxicode=512, PDF417=1024, QRcode=2048, RSS14=4096, RSSE=8192, UPCA=16384, UPCE=32768).
    codelevel

    int

    Some codes support redundancy levels, 1=low, 4=medium, 7=high.
    Example
    registerAction('canvasStampBarcodeTest', '', 'canvasStampBarcodeTest', 'component:Canvas:canvas');
    function canvasStampBarcodeTest(canvas) {
        canvasSetBrushPointSample(canvas, true);
        canvasSetBrushBlendMode(canvas, 3);
        canvasStampBarcode(canvas, "Text to user",180,180,0,17,uComps.StampCodeType.AZTEC,0);
        canvasStampBarcode(canvas, "123456",780,200,0,8,uComps.StampCodeType.PDF417,0);
        canvasStampBarcode(canvas, "345 and text",220,600,0,19,uComps.StampCodeType.QR_CODE,0);
    }

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

    canvasStampBuffer stamp a source canvas region onto the target canvas
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas
    canvas_src

    component

    the source canvas
    src_x,src_y

    int

    the source top left
    src_width,src_height

    int

    the source width and height
    dst_x,dst_y

    int

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

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

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

    component

    the target canvas
    canvas_src

    component

    the source canvas
    src_x,src_y

    int

    the source top left
    src_width,src_height

    int

    the source width and height
    dst_x,dst_y

    int

    the destination position top left
    hue

    real

    the color converted to hue (hsv) from 0 to 360, 0 red, 90 green, 180 blue
    hue_mask

    real

    the hue tollerance to generate the mask, 0 to 1, 0.1 or 0.06 are good values
    luminance_mask

    real

    the amount of luminance tollerance, 0 to 5, 1.5 is a good value
    mask_shadow

    real

    the amount of shadow preserved, 0 to 5, 2.6 is a good value, smaller means less shadow is added
    mask_light

    real

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

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

    canvasStampColorChannel stamp a source canvas region onto the target canvas from one channel to another
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas
    canvas_src

    component

    the source canvas
    src_x,src_y

    int

    the source top left
    src_width,src_height

    int

    the source width and height
    dst_x,dst_y

    int

    the destination position top left
    src_channel

    int

    (0 to 3) 0 Red, 1 Green, 2 Blue, 3 Alpha
    dst_channel

    int

    (0 to 3) 0 Red, 1 Green, 2 Blue, 3 Alpha
    Example
    registerAction('canvasStampColorChannelTest', '', 'canvasStampColorChannelTest', 'component:Canvas:canvas,component:Canvas2:canvas');
    function canvasStampColorChannelTest(canvas, canvas2) {
        var pixelWidth = canvasGetWidth(canvas2);
        var pixelHeight = canvasGetHeight(canvas2);
        canvasStampColorChannel(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 1, 2);
    }

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

    canvasStampCustom stamp a custom set of vectorised instructions onto the canvas

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

    The instruction set is as follows;

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

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

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

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

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

    halt = 255

    Parameters:
    Name Type Description
    canvas

    component

    the target canvas
    canvas_src

    component

    the source canvas
    canvas_lut

    component

    the Look Up Table canvas (optional)
    src_x

    real

    the source position
    src_y

    real

    the source position
    src_width,src_height

    real

    the size
    dst_x

    real

    the destination position
    dst_y

    real

    the destination position
    registers

    buffer

    optional 256 real32 registers
    pixel_code

    buffer

    the 8 bit opcodes to execute
    Example
    var reg_buffer = new ArrayBuffer(4);
    var registers = new DataView(reg_buffer);
    registers.setFloat32(0, 1);
    var op_buffer = new ArrayBuffer(4);
    var pixel_code = new DataView(op_buffer);
    pixel_code.setFloat32(0, 1);

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

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

    component

    the target canvas
    canvas_src

    component

    the source canvas
    src_x,src_y

    int

    the source top left
    src_width,src_height

    int

    the source width and height
    dst_x,dst_y

    int

    the destination position top left
    hue

    real

    0 no change, (-180 to 180), each 90 plus and minus is a change in RGB hue
    saturation

    real

    0 no change, (-1 to 1) -1 = desaturated, 1 = saturated
    value

    real

    0 no change, (-1 to 1) -1 = dark, 1 = bright
    Example
    registerAction('canvasStampHsvTest', '', 'canvasStampHsvTest', 'component:Canvas:canvas,component:Canvas2:canvas');
    function canvasStampHsvTest(canvas, canvas2) {
        var pixelWidth = canvasGetWidth(canvas2);
        var pixelHeight = canvasGetHeight(canvas2);
        canvasStampHsv(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 90, 0.5, 0.5);
    }

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

    canvasStampImage combines a target image with a source image with sub pixel accuracy and different blend and sample modes.
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas
    canvas_src

    component

    the source canvas
    src_x,src_y

    real

    the source top left
    src_width,src_height

    real

    the source width and height
    dst_x,dst_y

    real

    the destination position top left
    blendmode

    int

    0 noblend, 1 source - See here for the full set canvasSetBrushBlendMode
    samplemode

    int

    0 default linear, 1 nearest neighbor for hard edges images like barcodes
    Example
    registerAction('canvasStampImageTest', '', 'canvasStampImageTest', 'component:Canvas:canvas,component:Canvas2:canvas');
    function canvasStampImageTest(canvas, canvas2) {
        var pixelWidth = canvasGetWidth(canvas2);
        var pixelHeight = canvasGetHeight(canvas2);
        canvasStampImage(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 1, 1);
    }

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

    canvasStampImage combines a target image with a centered, scaled and rotated source image with sub pixel accuracy and different blend and sample modes.
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas
    canvas_src

    component

    the source canvas
    src_x,src_y

    real

    the source top left
    src_width,src_height

    real

    the source width and height
    dst_x,dst_y

    real

    the destination position in the center
    scale_x,scale_y

    real

    the scale
    angle

    real

    the angle in degrees
    blendmode

    int

    0 noblend, 1 source - See here for the full set canvasSetBrushBlendMode
    samplemode

    int

    0 default linear, 1 nearest neighbor for hard edges images like barcodes
    Example
    registerAction('canvasStampImageCenterTest', '', 'canvasStampImageCenterTest', 'component:Canvas:canvas,component:Canvas2:canvas');
    function canvasStampImageCenterTest(canvas, canvas2) {
        var pixelWidth = canvasGetWidth(canvas2);
        var pixelHeight = canvasGetHeight(canvas2);
        canvasStampImageCenter(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 200, 200, 3, 3, 45, 1, 1, true);
    }

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

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

    component

    the target canvas
    canvas_src

    component

    the source canvas
    src_p1x,src_p1y

    real

    the source top left
    src_p2x,src_p2y

    real

    the source top right
    src_p3x,src_p3y

    real

    the source bottom right
    src_p4x,src_p4y

    real

    the source bottom left
    dst_p1x,dst_p1y

    real

    the destination top left
    dst_p2x,dst_p2y

    real

    the destination top right
    dst_p3x,dst_p3y

    real

    the destination bottom right
    dst_p4x,dst_p4y

    real

    the destination bottom left
    blendmode

    int

    0 noblend, 1 source - See here for the full set canvasSetBrushBlendMode
    samplemode

    int

    0 default linear, 1 nearest neighbor for hard edges images like barcodes
    Example
    registerAction('canvasStampImagePerspectiveTest', '', 'canvasStampImagePerspectiveTest', 'component:Canvas:canvas,component:Canvas2:canvas');
    function canvasStampImagePerspectiveTest(canvas, canvas2) {
        var pixelWidth = canvasGetWidth(canvas2);
        var pixelHeight = canvasGetHeight(canvas2);
        canvasStampImagePerspective(canvas, canvas2, 0, 0, 300, 0, 300, 300, 0, 300, 0, 0, 300, 0, 300, 300, 0, 300);
    }

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

    canvasStampImageWarp combines a target image with a source image with sub pixel accuracy applying an affine
    warp with different blend and sample modes.
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas
    canvas_src

    component

    the source canvas
    src_x,src_y

    real

    the source top left
    src_width,src_height

    real

    the source width and height
    dst_p1x,dst_p1y

    real

    the destination top left
    dst_p2x,dst_p2y

    real

    the destination top right
    dst_p3x,dst_p3y

    real

    the destination bottom right
    dst_p4x,dst_p4y

    real

    the destination bottom left
    blendmode

    int

    0 noblend, 1 source - See here for the full set canvasSetBrushBlendMode
    samplemode

    int

    0 default linear, 1 nearest neighbor for hard edges images like barcodes
    Example
    registerAction('canvasStampImageWarpTest', '', 'canvasStampImageWarpTest', 'component:Canvas:canvas,component:Canvas2:canvas');
    function canvasStampImageWarpTest(canvas, canvas2) {
        var pixelWidth = canvasGetWidth(canvas2);
        var pixelHeight = canvasGetHeight(canvas2);
        canvasStampImageWarp(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 200, 0, 150, 150, 40, 200);
    }

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

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

    component

    the target canvas
    canvas_src

    component

    the source canvas
    src_x,src_y

    int

    the source top left
    src_width,src_height

    int

    the source width and height
    dst_x,dst_y

    int

    the destination position top left
    mode

    int

    0 just RGB, 1 RGB copy A from source, 2 RGB copy A from source where not zero, 3 Red only, 4 Green only, 5 Blue only, 6 Alpha only
    divider

    real

    sum all of the 3x3 kernel then divide by this value
    k1,k2,k3,k4,k5,k6,k7,k8,k9

    int

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

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

    canvasStampLighting stamp a source canvas region onto the target canvas while applying lighting
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas
    canvas_src

    component

    the source canvas
    src_x,src_y

    int

    the source top left
    src_width,src_height

    int

    the source width and height
    dst_x,dst_y

    int

    the destination position top left
    brightness

    real

    (-1 to 1) -1 = black, 0 = unmodified, 1 = white
    contrast

    real

    (-1 to 1) -1 = no contrast / grey, 0 = unmodified, 1 = high contrast
    shadow

    real

    (-1 to 1) -1 = shadow reduced, 0 = unmodified, 1 = shadow increased
    fill

    real

    (-1 to 1) -1 = fill light reduced, 0 = unmodified, 1 = fill light increased
    highlight

    real

    (-1 to 1) -1 = highlights reduced / grey, 0 = unmodified, 1 = highlights increased
    temperature

    real

    (-1 to 1) -1 = warm / red, 0 = unmodified, 1 = cool / blue
    Example
    registerAction('canvasStampLightingTest', '', 'canvasStampLightingTest', 'component:Canvas:canvas,component:Canvas2:canvas');
    function canvasStampLightingTest(canvas, canvas2) {
        var pixelWidth = canvasGetWidth(canvas2);
        var pixelHeight = canvasGetHeight(canvas2);
        canvasStampLighting(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5);
    }

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

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

    component

    the target canvas
    canvas_src

    component

    the source canvas
    src_x,src_y

    int

    the source top left
    src_width,src_height

    int

    the source width and height
    dst_x,dst_y

    int

    the destination position top left
    min_blend

    int

    (0 to 255) if one of the pixels is < min_blend brightness then take the brightst (remove the extreme e.g. unlit shadow areas)
    max_blend

    int

    (0 to 255) if one of the pixels is > max_blend brightness then take the darkest (remove extreme e.g. glare)
    Example
    //this needs certain images to be able to blend. Some image pairs just takes one or the other and does not blend. apple and ofice pics work.
    registerAction('canvasStampMinmaxBlendTest', '', 'canvasStampMinmaxBlendTest', 'component:Canvas:canvas,component:Canvas2:canvas');
    function canvasStampMinmaxBlendTest(canvas, canvas2) {
        var pixelWidth = canvasGetWidth(canvas2);
        var pixelHeight = canvasGetHeight(canvas2);
        canvasStampMinmaxBlend(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 0.2, 10, 0.5);
    }

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

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

    component

    the target canvas
    canvas_src

    component

    the source canvas
    src_x,src_y

    int

    the source top left
    src_width,src_height

    int

    the source width and height
    dst_x,dst_y

    int

    the destination position top left
    mode

    int

    0 just RGB, 1 RGB copy A from source, 2 RGB copy A from source where not zero, 3 Red only, 4 Green only, 5 Blue only, 6 Alpha only
    operator

    int

    0 threshold, 1 erode, 2 dilate, 3 gradient, 4 boundary, 5 hit and miss corner, 6 thinning
    Example
    //the source and destination canvases need to be different otherwise it doesn't work.
    registerAction('canvasStampMorphologicalTest', '', 'canvasStampMorphologicalTest', 'component:Canvas:canvas,component:Canvas2:canvas');
    function canvasStampMorphologicalTest(canvas, canvas2) {
        var pixelWidth = canvasGetWidth(canvas2);
        var pixelHeight = canvasGetHeight(canvas2);
        canvasStampMorphological(canvas, canvas2, 0, 0, pixelWidth, pixelHeight, 0, 0, 1, 2, 128);
    }

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

    canvasStampQr creates and stamps a QRcode onto the canvas.
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    code

    string

    the text/numbers to encode.
    x

    real

    the x position for the top left of where to put the QR code.
    y

    real

    the y position for the top left of where to put the QR code.
    angle

    real

    the angle in degrees.
    size

    real

    size from 1-100 pixels per bar.
    codelevel

    int

    Redundancy level, 1=low, 4=medium, 7=high.
    Example
    registerAction('canvasStampQrTest', '', 'canvasStampQrTest', 'component:Canvas:canvas');
    function canvasStampQrTest(canvas) {
        canvasStampQr(canvas, "QRCODE", 250, 250, 0, 19, 1);
    }

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

    canvasStampSvg stamp an SVG that had been preloaded with canvasPrepareSvg onto the canvas.
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    x

    real

    the x position for the top left of where to put the svg.
    y

    real

    the y position for the top left of where to put the svg.
    xratio,yratio

    real

    the scale width and height.
    angle

    real

    the angle in degrees.
    Example
    registerAction('canvasStampSvgTest', '', 'canvasStampSvgTest', 'component:Canvas:canvas');
    function canvasStampSvgTest(canvas) {
        canvasStampSvg(canvas, 0, 0, 0.5, 0.5, 90);
    }

    canvasToTexture(canvas, output_texture)

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

    component

    the target canvas.
    output_texture

    int

    the target texture.

    canvasTranslateTransform(canvas, x, y)

    canvasTranslateTransform updates the transform translation for the current path - this will be applied during canvasDrawPathFill or canvasDrawPathStroke
    Parameters:
    Name Type Description
    canvas

    component

    the target canvas.
    x

    real

    the translation in the x direction (can be negative or positive).
    y

    real

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

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