Class CanvasComponent

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. Make sure you have set the image property of the canvas with something that has variation in color tones. This tries to make all the pixels either white or black. If your Canvas Component's selected image is all one flat color then it will either turn all white or all black. You need an image with variation for this function to work.

new Action('Canvas adaptiveThreshold', canvasAdaptiveThreshold)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function canvasAdaptiveThreshold(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.adaptiveThreshold(0.2, 50, 0.5);
}

Adds a dash with on and off lengths, which can be chained together to create patterns for stroke operations like strokeText and stroke

new Action('Canvas addDash', canvasAddDash)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function canvasAddDash(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.beginPath()
    ctx.lineWidth = 4;
    ctx.rect(100,200,200,300);
    ctx.strokeStyle = '#000000'
    ctx.addDash(5, 15);
    ctx.stroke()
}

Draws a part, or full ellipse.

new Action('Canvas arc', canvasArc)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function canvasArc(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.beginPath();
    ctx.arc(200, 200, 100, 0, 3.14);
    ctx.strokeStyle = '#000000'
    ctx.stroke();
}

Automatically calculates and applies the maximum brightness and contrast.

new Action('Canvas autoBrightnessContrast', autoBrightnessContrast)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function autoBrightnessContrast(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.autoBrightnessContrast();
}

Automatically calculates and applies strong color saturation/balance

new Action('Canvas autoColor', autoColor)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function autoColor(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.autoColor();
}

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.

Adds a cubic Bezier curve (two control points) to the current path. Drawing will start from where ever you left off or (0,0) if clear so you may need to first move to your start point.

new Action('Canvas bezier4CurveTo', bezier4CurveTo)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function bezier4CurveTo(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.beginPath();
    ctx.moveTo(150, 150);
    ctx.bezier4CurveTo(150, 150, 175, 200, 180, 250, 140, 300);
    ctx.strokeStyle = '#000000'
    ctx.stroke();
}

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

new Action('Canvas bezierCurveTo', bezierCurveTo)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function bezierCurveTo(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.beginPath();
    ctx.moveTo(150, 150);
    ctx.bezierCurveTo(150, 150, 175, 200, 150, 250);
    ctx.strokeStyle = '#000000'
    ctx.stroke();
}

Blurs the canvas

new Action('Canvas boxBlur', boxBlur)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function boxBlur(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.boxBlur(30);
}

Blurs a region on the canvas

new Action('Canvas boxBlurRegion', boxBlurRegion)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function boxBlurRegion(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.boxBlurRegion(100, 100, 100, 100, 50);
}

This pairs with brushGradientStart. See the example for brushGradientStart

Sets the brush start gradient color for operations like stroke and fill

Sets the brush position for image mode operations. Useful for gradients. See the example for brushGradientStart

Sets the brush scale. This does not do anything on its own but is a setup to change other operations. Useful for gradients. See the example for brushGradientStart This can be used to make a gradient smaller or larger to better fit your shape.

Sets the brush bottom right clip for image mode operations. See example in (@link setBrushSource)

Sets the brush top left clip for image mode operations. See example in (@link setBrushSource) Setting brushMode to 2 allows it to actually use the image. This is needed.

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.

new Action('Canvas chromaKey', chromaKey)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function chromaKey(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.chromaKey(90, 0.06, 1.5, 2.6, 0.9);
}

clear refreshes the canvas with a new image buffer. This resets the canvas removing any previous drawing on the canvas. This also resets any settings applied to the draw path.

new Action('Canvas clear', clear)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function clear(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.clear();
}

Clears any dashes for future stroke operations. You use this if you added dashes for a stroke operation but you don't want dashes on the next stroke.

new Action('Canvas clearDash', clearDash)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function clearDash(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.beginPath();
    ctx.lineWidth = 4;
    ctx.rect(100,200,200,300);
    ctx.strokeStyle = '#000000'
    ctx.addDash(5, 15);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.clearDash();
    ctx.rect(400,250,500,200);
    ctx.stroke();
}

clearGradient clears any point gradients for brush operations like fill and stroke that you may have used already so that those point gradients don't affect future operations. Note this will not stop the gradient mode and you need to set brushMode back to 0 for this. This just clears any previous gradient data to get ready for a new gradient.

new Action('Canvas clearGradient', clearGradient)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function clearGradient(canvas) {
    //first make a gradient that goes between red and green
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.beginPath();
    ctx.brushGradientStart('0xFF0000FF')
    ctx.brushGradientEnd('#0x00FF00FF')
    ctx.brushMode = uComps.BrushMode.LINEAR_GRADIENT
    ctx.fillEllipse(150, 300, 150, 100, 40);
    
    //Clear the gradient will mean the next one has no colors set so it will be greyscale.
    ctx.clearGradient();
    ctx.beginPath();
    ctx.fillStyle = '#FF22FF';
    ctx.fillEllipse(150, 500, 150, 100, 40);
    
    ctx.brushMode = 0; //This will exit gradient mode to go back to normal fills
}

Same functionality as crop will clip and resize the canvas.

new Action('Canvas clip', clip)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function clip(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.clip(100,100,200,200);
}

This example will cut out a sqaure from your image starting at position (100,100) that is 200x200 pixel big. This square becomes the new image and will fill the canvas area.

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

new Action('Canvas closePath', closePath)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function closePath(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.beginPath();
    ctx.strokeStyle = '#FF0000';
    ctx.lineWidth = 4;
    ctx.moveTo(50, 50);
    ctx.lineTo(100, 50);
    ctx.lineTo(100, 100);
    ctx.lineTo(50, 100);
    ctx.closePath();
    ctx.stroke();
}

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

new Action('Canvas createNew', createNew)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function createNew(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    var size1 = ctx.createNew('', 50, 50, '0x00FF00FF','Generated background', false) //generated background
    var size2 = ctx.createNew('soccerbelgium.svg',0,0,'','Image background', true); //svg background image size
    var size3 = ctx.createNew('soccerbelgium.svg',50,50,'','Image background', false); //svg background set size
    var size4 = ctx.createNew('button_01_default_9.png',0,0,'','Image background', true); //image background
    var size5 = ctx.createNew('button_01_default_9.png',50,50,'','Image background', false); //image background
    print('size1 = ',size1);
}

Same functionality as clip 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.

new Action('Canvas crop', crop)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function crop(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.crop(100,100,200,200);
}

Looks for pixel connected blobs which match a specific color

new Action('Canvas detectBlobs', detectBlobs)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function detectBlobs(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    var blobs_JSON = ctx.detectBlobs('0xFFFFFF',10,10,10,3,10,0);
    var blobs = JSON.parse(blobs_JSON);
    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;
    }
}

new Action('Canvas detectSegments', detectSegments)
.addParameter('Source Canvas', uActions.ParamType.CANVAS)
.addParameter('Destination Canvas', uActions.ParamType.CANVAS)
.register();
function detectSegments(canvas, destinationCanvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.detectSegments(destinationCanvas._ref,100,10,1);
}

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

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

var ctx = uComps.cast.toCanvas(canvas);
var ctx_src = uComps.cast.toCanvas(canvas2);
var templates = ctx.detectSlidingTemplate(ctx_src.ref,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
}

This is just another name for fill() to match the old system naming.

Draws the current path with the current brush in fill mode (fills in the middle)

new Action('Canvas fill', fill)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function fill(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.beginPath();
    ctx.strokeStyle = '#FF0000';
    ctx.lineWidth = 4;
    ctx.rect(10,250,200,200);
    ctx.stroke();
    ctx.fillStyle = '#00FF00';
    ctx.fill();
}

Filled ellipse with center at the x/y position with radiuses radiusX, radiusY added to the path

new Action('Canvas fillEllipse', fillEllipse)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function fillEllipse(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.beginPath();
    ctx.fillStyle = '#FF22FF';
    ctx.fillEllipse(150, 100, 150, 100, 40);
}

A filled rectangle is added to the path

new Action('Canvas fillRect', fillRect)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function fillRect(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.beginPath();
    ctx.fillStyle = '#FF22FF';
    ctx.fillRect(200, 200, 100, 100);
}

A filled rectangle with curved corners is added to the path

new Action('Canvas fillRoundedRect', fillRoundedRect)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function fillRoundedRect(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.beginPath();
    ctx.fillStyle = '#FF22FF';
    ctx.fillRoundedRect(200, 200, 100, 100, 20);
}

The specified text is drawn with the current brush in fill mode. When specifying a font you need to use the name of the font and not the filename. The name of a font can be found by going to properties of the font file and checking the details tab.

var ctx = uComps.cast.toCanvas(canvas);
ctx.font = "40px vera"
ctx.fillStyle = "#000033"    
ctx.fillText("Solid",10,500,1000)

flipHorizontal flips the canvas horizontally.

new Action('Canvas flipHorizontal', flipHorizontal)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function flipHorizontal(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.flipHorizontal();
}

flipVertical flips the canvas vertically.

new Action('Canvas flipVertical', flipVertical)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function flipVertical(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.flipVertical();
}

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

new Action('Canvas getHeight', getHeight)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function getHeight(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    var canasHeight = ctx.getHeight();
    print('canasHeight = ',canasHeight);
}

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

new Action('Canvas getPixel', getPixel)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function getPixel(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    var pixelColor = ctx.getPixel(250, 250);
    print('pixelColor = ',pixelColor);
}

Retrieves all the pixel data in the canvas in ARGB format. To understand this data, also look at properties pixelWidth, pixelHeight, pixelStride and pixelFormat.

new Action('Canvas getPixelData', getPixelData)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function getPixelData(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    var ArrayBuffer = ctx.getPixelData();
    var dataReader = new DataView(ArrayBuffer);
    dataReader.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 = dataReader.getUint8(i);
        print('test = ',test);
    }
}

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

new Action('Canvas getWidth', getWidth)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function getWidth(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    var canasWidth = ctx.getWidth();
    print('canasWidth = ',canasWidth);
}

Adds a color point at a position from 1-254. The multi point gradient starts with brushGradientStart, then any point gradients, then ends with brushGradientEnd. This gradient is used for brush operations like fill and stroke. Look at brushGradientEnd example for use of gradientAddPoint.

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

Inverts the colors in the canvas.

new Action('Canvas invert', invert)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function invert(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    var canasHeight = ctx.invert();
}

Applies lighting to the canvas

new Action('Canvas lighting', lighting)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function lighting(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    var canasHeight = ctx.lighting(0.5, 0.5, 0.5, 0.5, 0.5, 0.5);
}

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. This mirrors the original JS command canvasAddLine().

new Action('Canvas lineTo', lineTo)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
new Action('Canvas lineTo', lineTo)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function lineTo(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.beginPath();
    ctx.strokeStyle = '#FF0000';
    ctx.lineWidth = 4;
    ctx.moveTo(50, 50);
    ctx.lineTo(100, 100);
    ctx.moveTo(150, 100);
    ctx.lineTo(150, 150);
    ctx.moveTo(150, 200);
    ctx.lineTo(200, 200);
    ctx.stroke();
}

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. This mirrors the original JS command canvasAddMove().

new Action('Canvas lineTo', lineTo)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function lineTo(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.beginPath();
    ctx.strokeStyle = '#FF0000';
    ctx.lineWidth = 4;
    ctx.moveTo(50, 50);
    ctx.lineTo(100, 100);
    ctx.moveTo(150, 100);
    ctx.lineTo(150, 150);
    ctx.moveTo(150, 200);
    ctx.lineTo(200, 200);
    ctx.stroke();
}

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.

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

new Action('Canvas prepareSvg', prepareSvg)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function prepareSvg(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.prepareSvg('soccerbelgium.svg', '');
}

This is the same as peakSignalToNoiseRatio and is just an abreviation.

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

new Action('Canvas readAprilTags', readAprilTags)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function readAprilTags(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.font = "30px vera";
    var tags = ctx.readAprilTags();
    tags = JSON.parse(tags);
    ctx.strokeStyle = '#FF0000';
    ctx.lineWidth = 4;
    for(var i = 0; i < tags.length; i++) {
        var obj = tags[i];
        ctx.beginPath();
        ctx.moveTo(obj.tl_x,obj.tl_y);
        ctx.lineTo(obj.tr_x,obj.tr_y);
        ctx.lineTo(obj.br_x,obj.br_y);
        ctx.lineTo(obj.bl_x,obj.bl_y);
        ctx.lineTo(obj.tl_x,obj.tl_y);
        ctx.stroke();
        ctx.fillText(obj.id,obj.x,obj.y-50,1000);
    }
}

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

new Action('Canvas readBarcode', readBarcode)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function readBarcode(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    var data = ctx.readBarcode();
    print('data = ',data,'  len = ',data.length);
}

Reads a potential QR code on the canvas. Note the QR code must have white space around it to work. If the QR code takes up the whole canvas and the black boxes are right on the edge it won't work.

new Action('Canvas readQrcode', readQrcode)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function readQrcode(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    var data = ctx.readQrcode();
    print('data = ',data,'  len = ',data.length);
}

Adds to the path a rectangle shape in the position and size specificed by parameters. Will only display once stroke() is called to draw everything added to the path.

new Action('Canvas rect', rect)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function rect(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.beginPath();
    ctx.strokeStyle = '#FF0000';
    ctx.lineWidth = 4;
    ctx.rect(50, 50, 100, 100);
    ctx.stroke();
}

Refreshes the canvas with a new image buffer and resets all properties back to defaults

Quickly updates the whole canvas to the specified color

new Action('Canvas resetColor', resetColor)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function resetColor(canvas) {
    var ctx = uComps.cast.toCanvas(canvas);
    ctx.resetColor('#FF0000');
}