The alpha transparency of the Component. Range from 0 to 100.
Sets the brush angle, in degrees. Useful for gradients
Sets the brush mode for operations like stroke and fill The brush blendmodes are uComps.BlendMode: 0 - NO_BLEND, 1 - SOURCE, 2 - DESTINATION, 3 - SRC_OVER, 4 - DST_OVER, 5 - SRC_IN, 6 - DST_IN, 7 - SRC_OUT, 8 - DST_OUT, 9 - SRC_ATOP, 10 - DST_ATOP, 11 - XOR, 12 - PLUS, 13 - MINUS, 14 - MULTIPLY, 15 - SCREEN, 16 - OVERLAY, 17 - DARKEN, 18 - LIGHTEN, 19 - DODGE, 20 - BURN, 21 - HARD_LIGHT, 22 - SOFT_LIGHT, 23 - DIFFERENCE, 24 - EXCLUSION, 25 - CONTRAST, 26 - INVERT, 27 - INVERT_RGB
ctx.brushBlendMode = uComps.BlendMode.MULTIPLY
The brush modes are uComps.BrushMode: 0 - UNIFORM, 1 - IMAGE_CLIP, 2 - IMAGE_REPEAT, 3 - LINEAR_GRADIENT, 4 - RADIAL_GRADIENT, 5 - CONIC_GRADIENT, 6 - DIAMOND_GRADIENT
ctx.brushMode = uComps.BrushMode.CONIC_GRADIENT;
Sets the brush to pointsample - this is used for sampling barcodes and other hard edged images. Default is 0. Set to 1 for barcodes and other hard edged images
Sets the brush image source
Clip the components contents using one of the options in ClippingType.
Access this Component's sub-components.
File from images directory, to load into the canvas component. Canvas has been set up to primarily support SVG files, but other image files can also be used.
Background color of the canvas
ctx.fillColor = '#FF0000'
Combined size and font family,
ctx.font = '20px Vera'
Whether or not is component is enabled for the parent form. Only relevant when inside a Form Component.
Label used to identify the field this Component belongs to in a form. Only relevant when inside a Form Component.
The height of the Component.
Sets the brush inner miter limit for stroke operations
Style of the end of a line. Values are uComps.LineCap: 0 - BUTT, 1 - SQUARE, 2 - ROUND see also lineTo
ctx.lineCap = uComps.LineCap.ROUND;
Style for inner edge where lines meet. Values are uComps.LineInnerJoin: 0 - INNER_BEVEL, 1 - INNER_MITER, 2 - INNER_JAG, 3 - INNER_ROUND
ctx.lineInnerJoin = uComps.LineInnerJoin.INNER_JAG;
Style for outer edge where lines meet. Values are uComps.LineJoin: 0 - MITER, 1 - MITER_REVERT, 2 - ROUND, 3 - BEVEL, 4 - MITER_ROUND
ctx.lineJoin = uComps.LineJoin.BEVEL;
Set or return the current line width, in pixels
Shape component to be used as a mask. Can be either a Rectangle or Circle Component.
Sets the distance between the inner and outer corners when 2 lines meet. The property works only if lineJoin is 0 - MiterJoin.
Name of the component.
Access this Component's parent component.
Whether or not the Component has passed form validation. Only relevant when inside a Form Component.
For accessing raw pixel data, the number of bytes per pixel. This correlates to the pixelFormat.
For accessing raw pixel data, the format of the data for each pixel
For accessing raw pixel data, the number of bytes per row of pixels. May be greater than pixelWidth * pixelDepth if padding is in use.
Sets the canvas display as stretch (0 - default) or fit (1)
Brush colour
ctx.strokeStyle = '#FF0000'
Type of the component.
Unique ID of the component.
Whether or not the Component is visible.
The width of the Component.
The x position of the Component relative to its parent.
The y position of the Component relative to its parent.
Thresholds with variable strength given a radius of local contrast. The blend 0-1 is how much of the image is preserved vs thresholded.
-1 to 1 how strong the threshold is towards binary
1 to 1000 how wide the radius to check for local contrast
0 to 1 how much of the image is preserved vs thresholded (0.5 is a common value)
This applies a 0-1 threshold with an adaptive radius in pixels. The blend 0-1 is how much of the image is preserved vs thresholded.
Adds a dash with on and off lengths, which can be chained together to create patterns for stroke operations like strokeText and stroke
length of dash in pixels
length of the gap in pixels
A part, or full ellipse
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 1.5 * Math.PI);
ctx.stroke();
center of the wedge
center of the wedge
curvature of the arc
start angle in radians
end angle in radians
Automatically calculates and applies the maximum brightness and contrast
Automatically calculates and applies strong color saturation/balance
Clears out the path buffer ready to add new commands
Adds a cubic Bezier curve (two control points) to the current path.
start point
start point
control point 1
control point 1
control point 2
control point 2
end point
end point
Adds a parabolic Bezier curve (one control point) to the current path
start point
start point
control point
control point
end point
end point
Blurs the canvas
radius of the blur in pixels
Blurs a region on the canvas
top left corner of the region
width of the region
height of the region
radius of the blur in pixels
Sets the brush start gradient color for operations like stroke and fill
var ctx = uComps.cast.toCanvas(canvas);
ctx.beginPath();
ctx.brushGradientStart('0x0026FFAA')
ctx.brushGradientEnd('#D3E')
ctx.brushMode = uComps.BrushMode.LINEAR_GRADIENT
ctx.brushPosition(100,200)
ctx.brushAngle = 45
ctx.fillEllipse(250,200,150,150)
Sets the brush start gradient color for operations like stroke and fill
var ctx = uComps.cast.toCanvas(canvas);
ctx.beginPath();
ctx.brushGradientStart('0x0026FFAA')
ctx.brushGradientEnd('#D3E')
ctx.brushMode = uComps.BrushMode.LINEAR_GRADIENT
ctx.brushPosition(100,200)
ctx.brushAngle = 45
ctx.fillEllipse(250,200,150,150)
Sets the brush position for image mode operations. Useful for gradients. See the example for brushGradientStart
the position
the position
Sets the brush scale for image mode operations
the image scale x
the image scale y
Sets the brush bottom right clip for image mode operations
the image bottom right clip position
the image bottom right clip position
Sets the brush top left clip for image mode operations
the image top left clip position
the image top left clip position
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.
the color converted to hue (hsv) from 0 to 360, 0 red, 90 green, 180 blue
the hue tollerance to generate the mask, 0 to 1, 0.1 or 0.06 are good values
the amount of luminance tollerance, 0 to 5, 1.5 is a good value
the amount of shadow preserved, 0 to 5, 2.6 is a good value, smaller means less shadow is added
the amount of saturated color preserved, 0 to 5, 0.9 is a good value, more means more highlights may be picked up
Refreshes the canvas with a new image buffer
Clears any dashes for stroke operations
Same functionality as crop will crop and resize the canvas
ctx.crop(10, 10, ctx.getWidth()-20, ctx.getHeight()-20)
//The canvas will now be 20 pixels narrower and shorter.
//The content of the canvas will expand to fit within the canvas component.
top left corner
top left corner
the width the area to be cropped
the height of the area to be cropped
Close a path and can be useful for some fill modes, but is generally not required
Refreshes the canvas with a new image buffer
//With no image set:
var ctx = uComps.cast.toCanvas(canvas);
ctx.createNew('',1920,1080,0xFFFFFF00)
//Set image and return image buffer:
var sz = ctx.createNew('demo_flower2.png',0,0,0xFFFFFF00)
sz = JSON.parse(sz)
optional image, png, jpg, bmp or svg
pixel_width (used for svg or if no filename)
pixel_height (used for svg or if no filename)
width,height - the size of buffer allocated
Crops and resizes the canvas
ctx.crop(10, 10, ctx.getWidth()-20, ctx.getHeight()-20)
//The canvas will now be 20 pixels narrower and shorter.
//The content of the canvas will expand to fit within the canvas component.
the width and height of the area to be cropped
the width and height of the area to be cropped
Looks for pixel connected blobs which match a specific color
var ctx = uComps.cast.toCanvas(canvas);
var blobs = ctx.detectBlobs('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
}
color to match
from 0 to 255 the 8 bit range (0 is an exact match, 255 matches all) for red channel
from 0 to 255 the 8 bit range (0 is an exact match, 255 matches all) for green channel
from 0 to 255 the 8 bit range (0 is an exact match, 255 matches all) for blue channel
the number of pixels to make or reject an RLE stride. Small number includes small blobs, large number includes large blobs
the minimum pixel count to be considered a blob (4 or higher)
if true lets you see the matches on the source canvas
JSON blobs - for each blob the x,y,total is recorded
Looks for pixel with a similar color and create (SNIC) superpixels into a result canvas with a unique color for each superpixel
ctx.canvasDetectSegments(destination_canvas,100,10,1)
the canvas to hold the result
the number of superpixels (2 or higher)
0 to 100, the super pixels tendancy to circularity (10 is a common value)
if true lets you see the segments on the source canvas
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
}
the template canvas
the canvas_template can have one or more templates left to right, they must all be the same width
the spot on the canvas to match the templates against
the spot on the canvas to match the templates against
the number of pixels to slide in x to test the templates
the number of pixels to slide in y to test the templates
by default 1 pixel, but can step in 2,3 or more pixel increments
JSON template_matches - for each template the diff,x,y where the difference is the best match and x,y is the template position
Call each callback that is registered for the given eventType, in the order they were registered, passing the supplied data to each.
The type of the event to emit.
Data object to pass to each callback.
Draws the current path with the current brush in fill mode (fill in the middle)
Filled ellipse at the x/y position with radiuses radiusX, radiusY added to the path
//draw a magenta elipse
ctx.beginPath();
ctx.fillEllipse(200, 200, 80, 100, 50)
ctx.fillStyle = '#FF22FF'
ellipse position
ellipse position
x radius
y radius (a circle if both radius values are the same)
a larger number produces a smoother ellipse
A filled rectangle is added to the path
//draw a solid red rounded rectangle
var ctx = uComps.cast.toCanvas(canvas);
ctx.beginPath()
ctx.fillRect(10,10,200,200)
ctx.strokeStyle = '#FF0000'
width of the rectangle
height of the rectangle
A filled rectangle with curved corners is added to the path
//draw a solid red rounded rectangle
var ctx = uComps.cast.toCanvas(canvas);
ctx.beginPath()
ctx.fillRoundedRect(10,10,200,200,20)
ctx.strokeStyle = '#FF0000'
width of the rectangle
height of the rectangle
curvature of the corners
The specified text is drawn with the current brush in fill mode
var ctx = uComps.cast.toCanvas(canvas);
ctx.font = "40px vera"
ctx.fillStyle = "#000033"
ctx.fillText("Solid",10,500,1000)
the text to render
the position of the top left corner
the position of the top left corner
flipHorizontal flips the canvas horizontally
flipVertical flips the canvas vertically
Set the keyboard focus to this component.
new uActions.Action('set focus', setFocus)
.addParameter('text entry',uActions.ParamType.TEXT_ENTRY)
.register();
function setFocus(textEntry) {
textEntry.focus();
}
Get a property by name.
var uActions = require('u-actions');
new uActions.Action('get fontsize',getFontSize).register();
function getFontSize() {
var text1=uPages.current.components.getText('Text 1');
console.log(text1.get('font_size'));
}
The name of the property to get.
Returned value can be of any type, or even null.
Returns the canvas height
Returns the RGBA color value of a pixel in an image_buffer. Out of bounds requests return the color transparent black
Retrieves all the pixel data in the canvas in ARGB format. To understand this data, also look at properties pixelWidth, pixelHeight, pixelStride and pixelFormat.
Returns the canvas width
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
the color point to add as a string such as '#DD33EE', or shorthand hex '#D3E', or include the alpha channel '0xDD33EEAA'
from 1 to 254 (e.g. 128 will be a middle color between the start and end colors)
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
0 no change, (-180 to 180), each 90 plus and minus is a change in RGB hue
0 no change, (-1 to 1) -1 = desaturated, 1 = saturated
0 no change, (-1 to 1) -1 = dark, 1 = bright
Inverts the colors in the current canvas
Applies lighting to the canvas
(-1 to 1) -1 = black, 0 = unmodified, 1 = white
(-1 to 1) -1 = no contrast / grey, 0 = unmodified, 1 = high contrast
(-1 to 1) -1 = shadow reduced, 0 = unmodified, 1 = shadow increased
(-1 to 1) -1 = fill light reduced, 0 = unmodified, 1 = fill light increased
(-1 to 1) -1 = highlights reduced / grey, 0 = unmodified, 1 = highlights increased
(-1 to 1) -1 = warm / red, 0 = unmodified, 1 = cool / blue
Draws a line from the current position to the new one on a path
var ctx = uComps.cast.toCanvas(canvas);
ctx.lineCap = uComps.LineCap.ROUND;
ctx.lineWidth = 10
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(300, 150);
ctx.stroke();
new position
new position
Moves to a new position without drawing on a path
new position
new position
Adds the callback function to the end of the listeners array for eventType.
The type of the event.
The callback function
Calculates the peak signal to noise ratio comparing the image_buffer set in the canvas, to the image buffer of other_image. 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.
the comparison canvas
the calculated peak signal to noise ratio
Preload an SVG ready to be stamped onto the canvas stampSvg
the svg file from the images folder
an alternative svg string to render
Calculates the peak signal to noise ratio comparing the image_buffer set in the canvas, to the image buffer of other_image. 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.
the comparison canvas
the calculated peak signal to noise ratio
Reads potential april tags on the canvas
var ctx = uComps.cast.toCanvas(canvas);
var ctx_src = uComps.cast.toCanvas(canvas2);
ctx.resetColor('0x448844FF')
ctx.font = "30px vera"
var sz = ctx_src.createNew('april_tag.png',0,0,'0xFFFFFF00')
sz = JSON.parse(sz)
ctx.stampImageCenter(ctx_src._ref,0,0,sz.width,sz.height,780,620,1,1,0,true)
var tags = ctx.readAprilTags()
tags = JSON.parse(tags)
ctx.stroke_style = '0xFF0000FF'
for(var i = 0; i < tags.length; i++) {
var obj = tags[i]
ctx.beginPath();
ctx.moveTo(obj.tl_x,obj.tl_y)
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)
}
JSON 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)
Reads a potential barcode on the canvas
code - the data encoded
Reads a potential QR code on the canvas
code - the data encoded
A filled, or outlined rectangle is added to the path
//draw a solid yellow rectangle
var ctx = uComps.cast.toCanvas(canvas);
ctx.beginPath()
ctx.rect(10,10,200,200,10)
ctx.strokeStyle = '#F3F200'
ctx.fill()
//draw a outlined red rectangle
ctx.beginPath()
ctx.rect(10,250,200,200)
ctx.strokeStyle = '#FF0000'
ctx.stroke()
width of the rectangle
height of the rectangle
Refresh this component to force it to be re-rendered, or for its dynamic data to be updated.
Refreshes the canvas with a new image buffer and resets all properties back to defaults
Quickly updates the whole canvas to the specified color
ctx.resetColor('0x448844FF')
the color to apply to the canvas
Updates the transform back to it's default value
Resize the canvas
ctx.resize(canvasGetWidth(canvas)/2.0, canvasGetHeight(canvas)/2.0, 1, 1)
the width and height to resize to
the width and height to resize to
0 nearest, 1 linear, 2 avg, 3 lanzcos
0 nearest, 1 linear, 2 avg, 3 lanzcos
Rotate the canvas
ctx.rotate(90 * Math.PI/180)
rotation angle in radians
Transform the brush - rotate to the given angle (in radians)
ctx.rotateBrush(90 * Math.PI/180)
rotation angle in radians
A rectangle with curved corners is added to the path
//draw a solid yellow rounded rectangle
var ctx = uComps.cast.toCanvas(canvas);
ctx.beginPath()
ctx.roundedRect(10,10,200,200,10)
ctx.strokeStyle = '#F3F200'
ctx.fill()
width of the rectangle
height of the rectangle
curvature of the corners
Saves an image from the canvas to storage
ctx.saveAs("test.png", 1)
ctx.saveAs("test.jpg", 0.8)
the path and filename with extension .png or .jpg
the jpeg or png compression ratio from 0-1
Set a properties value by name.
var uActions = require('u-actions');
new uActions.Action('set text color',setTextColor).register();
function setTextColor() {
uPages.get('follow').components.getText('Text 1').set('font_color','0x0000FFFF');
}
The name of the property to set.
The value to set. Can be of any type.
Set a number properties at once.
Data object containing property name and value pairs to set on this component.
setPixel sets a pixel color on the current canvas
pixel position
pixel position
pixel RGBA color
Sets a new set of pixel data to the canvas in a specified format.
the width in pixels of the data
the height in pixels of the data
the number of bytes per row of the data; often the same as width * bytes per pixel
uComps:PixelFormat - the format of the data for each pixel.
the pixel data
True if the data was successfully loaded into the canvas
Updates the transform back to it's default value before scaling, rotating, and skewing the current canvas context
//Display yellow and blue rectangles. The red rectangle is hidden beneath the blue
var ctx = uComps.cast.toCanvas(canvas);
ctx.beginPath();
ctx.fillStyle = "#FFD800";
ctx.fillRect(0, 0, 250, 100)
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 250, 100);
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "#0000FF";
ctx.fillRect(0, 0, 250, 100);
horizontal scaling (1 = normal scale, 0.5 = half scale, 2.0 = double scale)
vertical skewing (0 = normal, negative values skew upwards )
horizontal skewing (0 = normal, negative values skew left )
vertical scaling (1 = normal scale, 0.5 = half scale, 2.0 = double scale)
horizontal translation (0 = no change, translation in the x direction )
vertical translation (0 = no change, translation in the y direction )
the skew in the x direction (can be negative or positive)
the skew in the y direction (can be negative or positive)
Converts lines on a path into a bezier
var ctx = uComps.cast.toCanvas(canvas);
ctx.resetColor('0x448844FF')
ctx.beginPath()
ctx.strokeStyle = '#FFFFFF'
ctx.moveTo(20,Math.cos(0.0)*180+200)
for (i = 0; i < 15; i++) {
ctx.lineTo(i*50 + 20,Math.cos(i)*180 + 200)
}
//draw jagged lines
ctx.stroke()
//now smooth and draw smooth curve below
ctx.smoothPath(2)
ctx.translate(0,100)
ctx.stroke()
ctx.resetTransform()
number of steps of smoothing (0 to 2)
Thresholds with variable strength given a radius of local contrast. The blend 0-1 is how much of the image is preserved vs thresholded.
the source canvas
the source top left
the source top left
the source width
the source height
the destination position top left
the destination position top left
-1 to 1 how strong the threshold is towards binary
1 to 1000 how wide the radius to check for local contrast
0 to 1 how much of the image is preserved vs thresholded (0.5 is a common value)
Stamps a source canvas region onto the target canvas while calculating and applying the maximum brightness and contrast
the source canvas
the source top left
the source top left
the source width
the source height
the destination position top left
the destination position top left
Stamps a source canvas region onto the target canvas while calculating and applying strong color saturation/balance
the source canvas
the source top left
the source top left
the source width
the source height
the destination position top left
the destination position top left
Stamps a 1D or 2D barcode onto the canvas
ctx.brushPointSample = -1
ctx.stampBarcode("Text to user",200,400,0,17,uComps.StampCodeType.AZTEC,0)
ctx.stampBarcode("123456",1260,200,0,8,uComps.StampCodeType.PDF417,0)
ctx.stampBarcode("345 and text",1260,700,0,19,uComps.StampCodeType.QR_CODE,0)
the text/numbers to encode (note only some barcodes such as Aztec, QR, PDF417 support letters)
the position
the position
the angle in degrees
size from 1-100 pixels per bar
the barcode uComps.StampCodeType: (1 - AZTEC, 2 - CODE_ABAR, 4 - CODE_39, 8 - CODE_93, 16 - CODE_128, 32 - DATA_MATRIX, 64 - EAN8, 128 - EAN13, 256 - ITF, 512 - MAXICODE, 1024 - PDF417, 2048 - QR_CODE, 4096 - RSS14, 8192 - RSSE, 16384 - UPCA, 32768 - UPCE)
Some codes support redundancy levels, 1=low, 4=medium, 7=high
stampBuffer stamps a source canvas region onto the target canvas
the source canvas
the source top left
the source top left
the source width
the source height
the destination position top left
the destination position top left
Removes from the source_canvas (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.
the source canvas
the source top left
the source top left
the source width
the source height
the destination position top left
the destination position top left
the color converted to hue (hsv) from 0 to 360, 0 red, 90 green, 180 blue
the hue tollerance to generate the mask, 0 to 1, 0.1 or 0.06 are good values
the amount of luminance tollerance, 0 to 5, 1.5 is a good value
the amount of shadow preserved, 0 to 5, 2.6 is a good value, smaller means less shadow is added
the amount of saturated color preserved, 0 to 5, 0.9 is a good value, more means more highlights may be picked up
Stamps a source canvas region onto the target canvas from one channel to another
the source canvas
the source top left
the source top left
the source width
the source height
the destination position top left
the destination position top left
(0 to 3) 0 Red, 1 Green, 2 Blue, 3 Alpha
(0 to 3) 0 Red, 1 Green, 2 Blue, 3 Alpha
Stamps the source_canvas 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
the source canvas
the source top left
the source top left
the source width
the source height
the destination position top left
the destination position top left
0 no change, (-180 to 180), each 90 plus and minus is a change in RGB hue
0 no change, (-1 to 1) -1 = desaturated, 1 = saturated
0 no change, (-1 to 1) -1 = dark, 1 = bright
Combines a target image with a source image with sub pixel accuracy and different blend and sample modes.
the source canvas
the source top left
the source top left
the source width
the source height
the destination position top left
the destination position top left
0 noblend, 1 source - See here for the full set brushBlendMode
true: default linear, false: nearest neighbor for hard edges images like barcodes
Combines a target image with a centered, scaled and rotated source image with sub pixel accuracy and different blend and sample modes.
the source canvas
the source top left
the source top left
the source width
the source height
the destination position top left
the destination position top left
the scale
the scale
the angle in degrees
0 noblend, 1 source - See here for the full set brushBlendMode
true: default linear, false: nearest neighbor for hard edges images like barcodes
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.
the source canvas
the source top left
the source top left
the source top right
the source top right
the source bottom right
the source bottom right
the source bottom left
the source bottom left
the destination top left
the destination top left
the destination top right
the destination top right
the destination bottom right
the destination bottom right
the destination bottom left
the destination bottom left
0 noblend, 1 source - See here for the full set brushBlendMode
Combines a target image with a source image with sub pixel accuracy applying an affine warp with different blend and sample modes.
the source canvas
the source top left
the source top left
the source width
the source height
the destination top left
the destination top left
the destination top right
the destination top right
the destination bottom right
the destination bottom right
the destination bottom left
the destination bottom left
0 noblend, 1 source - See here for the full set brushBlendMode
stampKernel stamps the source_canvas 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
the source canvas
the source top left
the source top left
the source width
the source height
the destination position top left
the destination position top left
uComps.RgbMode: 0 - RGB, 1 - RGB_COPY (copy A from source), 2 - RGB_COPY_NON_ZERO (copy A from source where not zero), 3 - RED_ONLY, 4 - GREEN_ONLY, 5 - BLUE_ONLY, 6 - ALPHA_ONLY
sum all of the 3x3 kernel then divide by this value
k1 to k9: the three by three kernel
Stamps a source canvas region onto the target canvas while applying lighting
the source canvas
the source top left
the source top left
the source width
the source height
the destination position top left
the destination position top left
(-1 to 1) -1 = black, 0 = unmodified, 1 = white
(-1 to 1) -1 = no contrast / grey, 0 = unmodified, 1 = high contrast
(-1 to 1) -1 = shadow reduced, 0 = unmodified, 1 = shadow increased
(-1 to 1) -1 = fill light reduced, 0 = unmodified, 1 = fill light increased
(-1 to 1) -1 = highlights reduced / grey, 0 = unmodified, 1 = highlights increased
(-1 to 1) -1 = warm / red, 0 = unmodified, 1 = cool / blue
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.
the source canvas
the source top left
the source top left
the source width
the source height
the destination position top left
the destination position top left
(0 to 255) if one of the pixels is < min_blend brightness then take the brightst (remove the extreme e.g. unlit shadow areas)
(0 to 255) if one of the pixels is > max_blend brightness then take the darkest (remove extreme e.g. glare)
Stamps the source_canvas 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.
the source canvas
the source top left
the source top left
the source width
the source height
the destination position top left
the destination position top left
uComps.RgbMode: 0 - RGB, 1 - RGB_COPY (copy A from source), 2 - RGB_COPY_NON_ZERO (copy A from source where not zero), 3 - RED_ONLY, 4 - GREEN_ONLY, 5 - BLUE_ONLY, 6 - ALPHA_ONLY
uComps.Operator: 0 - THRESEHOLD, 1 ERODE, 2 - DILATE, 3 - GRADIENT, 4 - BOUNDARY, 5 - HIT_AND_MISS_CORNER, 6 - THINNING
Normally 128. Below this is black, above this is white.
Stamps a QRcode onto the canvas
ctx.stampQr("QRCODE",1260,700,0,19,1)
the text/numbers to encode
the position
the position
the angle in degrees
size from 1-100 pixels per bar
Redundancy level, 1=low, 4=medium, 7=high
Stamps an SVG that had been preloaded with prepareSvg onto the canvas
ctx.prepareSvg("tiger.svg","")
ctx.stampSvg(150,10,1,1,0)
ctx.stampSvg(150,10,0.5,0.5,45)
ctx.prepareSvg("umajin.svg","")
ctx.stampSvg(370,390,0.2,0.2,0)
the position
the position
the scale width (1 = no scaling)
the scale height (1 = no scaling)
Draws the current path with the current brush (draw the outside)
Outline of an ellipse at the x/y position with radiuses radiusX, radiusY added to the path
//draw a magenta elipse as an outline
ctx.beginPath();
ctx.strokeEllipse(200, 200, 80, 100, 50)
ctx.strokeStyle = '#FF22FF'
ellipse position
ellipse position
x radius
y radius (a circle if both radius values are the same)
a larger number produces a smoother ellipse
A rectangle outline is added to the path
//draw a red rounded rectangle outline
var ctx = uComps.cast.toCanvas(canvas);
ctx.beginPath()
ctx.strokeRect(10,10,200,200)
ctx.strokeStyle = '#FF0000'
width of the rectangle
height of the rectangle
An outlined rectangle with curved corners is added to the path
//draw a red rounded rectangle outline
var ctx = uComps.cast.toCanvas(canvas);
ctx.beginPath()
ctx.strokeRoundedRect(10,10,200,200,20)
ctx.strokeStyle = '#FF0000'
width of the rectangle
height of the rectangle
curvature of the corners
The specified text is drawn as an outline with the current brush
var ctx = uComps.cast.toCanvas(canvas);
ctx.font = "40px vera"
ctx.strokeStyle = "#000033"
ctx.strokeText("Outline",10,500,1000)
the text to render
the position of the top left corner
the position of the top left corner
The specified text width is calculated without rendering. Note: This should be used instead of measureText(text).width
var ctx = uComps.cast.toCanvas(canvas);
ctx.font = "30px vera";
var txt = "A small sentence"
ctx.fillText("width:" + ctx.textWidth(txt), 10, 50)
ctx.fillText(txt, 10, 100);
the text to measure
width - the width of the text if it was rendered
Sends the canvas image to the texture target on the GPU for 3D rendering
the target texture
Scales, rotates, and skews the current canvas context. Use resetTransform to reset the current transform.
//Display yellow, blue, and red rectangles. Each rectangle is built on the previous transformation matrix
var ctx = uComps.cast.toCanvas(canvas);
ctx.beginPath();
ctx.fillStyle = "#FFD800";
ctx.fillRect(0, 0, 250, 100)
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 250, 100);
ctx.resetTransform();
horizontal scaling (1 = normal scale, 0.5 = half scale, 2.0 = double scale)
vertical skewing (0 = normal, negative values skew upwards )
horizontal skewing (0 = normal, negative values skew left )
vertical scaling (1 = normal scale, 0.5 = half scale, 2.0 = double scale)
horizontal translation (0 = no change, translation in the x direction )
vertical translation (0 = no change, translation in the y direction )
the translation in the x direction (can be negative or positive)
the translation in the y direction (can be negative or positive)
Tween a component property over time.
The number of seconds to tween for.
An objects that contains key/value pairs of the properties and values to tween.
(Optional) Tween type can be any type from "Tween.type"
A part of an ellipse with an inner and outer radius, and starting and ending angle is added to the path
ctx.beginPath();
ctx.wedge(180,110,100,80,20* Math.PI/180,60* Math.PI/180,0.3);
ctx.wedge(180,110,100,80,200* Math.PI/180,240* Math.PI/180,0.3);
ctx.strokeStyle = '#0000FF'
ctx.fill();
center of the wedge
center of the wedge
x radius
y radius (a circle if both radius values are the same)
start angle in radians
end angle in radians
0 is no thickness (just follows the circumference), 1 is a wedge right to the center of the ellipse, 0.5 is halfway
Once a Canvas Component has been added to the page from the Component selector, the Canvas Component can be passed as a parameter to actions. Code within the action can set properties and call methods on the Canvas Component.