Options
All
  • Public
  • Public/Protected
  • All
Menu

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.

var uComps = require('u-components');
var uActions = require('u-actions');
var Action = uActions.Action;
new Action('Canvas Demo', canvasDemo)
.addParameter('Canvas', uActions.ParamType.CANVAS)
.register();
function canvasDemo(canvas) {
var ctx = uComps.cast.toCanvas(canvas);
ctx.beginPath();
ctx.fillStyle = '#9EFFF3'
ctx.brushMode = uComps.BrushMode.UNIFORM;
ctx.fillRect(300,100,600,700) ;
}

Hierarchy

Index

Constructors

Properties

alpha: number

The alpha transparency of the Component. Range from 0 to 100.

brushAngle: number

Sets the brush angle, in degrees. Useful for gradients

brushBlendMode: BlendMode

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
brushMode: BrushMode

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;
brushPointSample: number

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

brushSource: string

Sets the brush image source

clippingType: ClippingType

Clip the components contents using one of the options in ClippingType.

components: ComponentList

Access this Component's sub-components.

filename: string

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.

fillColor: string

Background color of the canvas

ctx.fillColor = '#FF0000' 
fillStyle: string
font: string

Combined size and font family,

ctx.font = '20px Vera' 
fontFilename: string
fontHeight: string
formEnabled: boolean

Whether or not is component is enabled for the parent form. Only relevant when inside a Form Component.

formFieldName: string

Label used to identify the field this Component belongs to in a form. Only relevant when inside a Form Component.

height: number

The height of the Component.

innerMiterLimit: number

Sets the brush inner miter limit for stroke operations

lineCap: LineCap

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;
lineInnerJoin: LineInnerJoin

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;
lineJoin: LineJoin

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;
lineWidth: number

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.

miterLimit: number

Sets the distance between the inner and outer corners when 2 lines meet. The property works only if lineJoin is 0 - MiterJoin.

name: string

Name of the component.

nativeHeight: number
nativeWidth: number
parent: Component

Access this Component's parent component.

passedFormValidation: boolean

Whether or not the Component has passed form validation. Only relevant when inside a Form Component.

pixelDepth: number

For accessing raw pixel data, the number of bytes per pixel. This correlates to the pixelFormat.

pixelFormat: PixelFormat

For accessing raw pixel data, the format of the data for each pixel

pixelHeight: number
pixelStride: number

For accessing raw pixel data, the number of bytes per row of pixels. May be greater than pixelWidth * pixelDepth if padding is in use.

pixelWidth: number
resizeMode: number

Sets the canvas display as stretch (0 - default) or fit (1)

strokeStyle: string

Brush colour

ctx.strokeStyle = '#FF0000' 
type: string

Type of the component.

uniqueId: string

Unique ID of the component.

visible: boolean

Whether or not the Component is visible.

width: number

The width of the Component.

x: number

The x position of the Component relative to its parent.

y: number

The y position of the Component relative to its parent.

Methods

  • adaptiveThreshold(strength: number, radius: number, blend: number): void
  • 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

    • strength: number

      -1 to 1 how strong the threshold is towards binary

    • radius: number

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

    • blend: number

      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.

    Returns void

  • addDash(onLength: number, offLength: number): void
  • Adds a dash with on and off lengths, which can be chained together to create patterns for stroke operations like strokeText and stroke

    Parameters

    • onLength: number

      length of dash in pixels

    • offLength: number

      length of the gap in pixels

    Returns void

  • arc(x: number, y: number, radius: number, startAngle: number, endAngle: number): void
  • A part, or full ellipse

    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, 1.5 * Math.PI);
    ctx.stroke();

    Parameters

    • x: number

      center of the wedge

    • y: number

      center of the wedge

    • radius: number

      curvature of the arc

    • startAngle: number

      start angle in radians

    • endAngle: number

      end angle in radians

    Returns void

  • autoBrightnessContrast(): void
  • Automatically calculates and applies the maximum brightness and contrast

    Returns void

  • autoColor(): void
  • Automatically calculates and applies strong color saturation/balance

    Returns void

  • beginPath(): void
  • Clears out the path buffer ready to add new commands

    Returns void

  • bezier4CurveTo(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): void
  • Adds a cubic Bezier curve (two control points) to the current path.

    Parameters

    • x1: number

      start point

    • y1: number

      start point

    • x2: number

      control point 1

    • y2: number

      control point 1

    • x3: number

      control point 2

    • y3: number

      control point 2

    • x4: number

      end point

    • y4: number

      end point

    Returns void

  • bezierCurveTo(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void
  • Adds a parabolic Bezier curve (one control point) to the current path

    Parameters

    • x1: number

      start point

    • y1: number

      start point

    • x2: number

      control point

    • y2: number

      control point

    • x3: number

      end point

    • y3: number

      end point

    Returns void

  • boxBlur(radius: number): void
  • Blurs the canvas

    Parameters

    • radius: number

      radius of the blur in pixels

    Returns void

  • boxBlurRegion(x: number, y: number, width: number, height: number, radius: number): void
  • Blurs a region on the canvas

    Parameters

    • x: number
    • y: number

      top left corner of the region

    • width: number

      width of the region

    • height: number

      height of the region

    • radius: number

      radius of the blur in pixels

    Returns void

  • brushGradientEnd(color: string): void
  • 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)

    Parameters

    • color: string

    Returns void

  • brushGradientStart(color: string): void
  • 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)

    Parameters

    • color: string

    Returns void

  • brushPosition(x: number, y: number): void
  • Sets the brush position for image mode operations. Useful for gradients. See the example for brushGradientStart

    Parameters

    • x: number

      the position

    • y: number

      the position

    Returns void

  • brushScale(scaleX: number, scaleY: number): void
  • Sets the brush scale for image mode operations

    Parameters

    • scaleX: number

      the image scale x

    • scaleY: number

      the image scale y

    Returns void

  • brushSourceBottomRight(x: number, y: number): void
  • Sets the brush bottom right clip for image mode operations

    Parameters

    • x: number

      the image bottom right clip position

    • y: number

      the image bottom right clip position

    Returns void

  • brushSourceTopLeft(x: number, y: number): void
  • Sets the brush top left clip for image mode operations

    Parameters

    • x: number

      the image top left clip position

    • y: number

      the image top left clip position

    Returns void

  • chromaKey(hue: number, hueMask: number, luminanceMask: number, maskShadow: number, maskLight: number): void
  • 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

    • hue: number

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

    • hueMask: number

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

    • luminanceMask: number

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

    • maskShadow: number

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

    • maskLight: number

      the amount of saturated color preserved, 0 to 5, 0.9 is a good value, more means more highlights may be picked up

    Returns void

  • clear(): void
  • Refreshes the canvas with a new image buffer

    Returns void

  • clearDash(): void
  • Clears any dashes for stroke operations

    Returns void

  • clearGradient(): void
  • clearGradient clears any point gradients for brush operations like fill and stroke

    Returns void

  • clip(x: number, y: number, width: number, height: number): void
  • 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.

    Parameters

    • x: number

      top left corner

    • y: number

      top left corner

    • width: number

      the width the area to be cropped

    • height: number

      the height of the area to be cropped

    Returns void

  • closePath(): void
  • Close a path and can be useful for some fill modes, but is generally not required

    Returns void

  • Parameters

    Returns void

  • createNew(filename: string, width: number, height: number, fillColor: string): any
  • 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)

    Parameters

    • filename: string

      optional image, png, jpg, bmp or svg

    • width: number

      pixel_width (used for svg or if no filename)

    • height: number

      pixel_height (used for svg or if no filename)

    • fillColor: string

    Returns any

    width,height - the size of buffer allocated

  • crop(x: number, y: number, width: number, height: number): void
  • 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.

    Parameters

    • x: number
    • y: number
    • width: number

      the width and height of the area to be cropped

    • height: number

      the width and height of the area to be cropped

    Returns void

  • detectBlobs(color: string, rSimilarity: number, gSimilarity: number, bSimilarity: number, sensitivity: number, blobMinSize: number, visualise: number): any
  • 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
    }

    Parameters

    • color: string

      color to match

    • rSimilarity: number

      from 0 to 255 the 8 bit range (0 is an exact match, 255 matches all) for red channel

    • gSimilarity: number

      from 0 to 255 the 8 bit range (0 is an exact match, 255 matches all) for green channel

    • bSimilarity: number

      from 0 to 255 the 8 bit range (0 is an exact match, 255 matches all) for blue channel

    • sensitivity: number

      the number of pixels to make or reject an RLE stride. Small number includes small blobs, large number includes large blobs

    • blobMinSize: number

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

    • visualise: number

      if true lets you see the matches on the source canvas

    Returns any

    JSON blobs - for each blob the x,y,total is recorded

  • detectSegments(destinationCanvas: Component, numElements: number, compactness: number, visualise: number): void
  • 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)
    

    Parameters

    • destinationCanvas: Component

      the canvas to hold the result

    • numElements: number

      the number of superpixels (2 or higher)

    • compactness: number

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

    • visualise: number

      if true lets you see the segments on the source canvas

    Returns void

  • detectSlidingTemplate(templateCanvas: Component, templateCountX: number, centerMatchX: number, centerMatchY: number, pixelSlideX: number, pixelSlideY: number, slideStep: number): any
  • 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
    }

    Parameters

    • templateCanvas: Component

      the template canvas

    • templateCountX: number

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

    • centerMatchX: number

      the spot on the canvas to match the templates against

    • centerMatchY: number

      the spot on the canvas to match the templates against

    • pixelSlideX: number

      the number of pixels to slide in x to test the templates

    • pixelSlideY: number

      the number of pixels to slide in y to test the templates

    • slideStep: number

      by default 1 pixel, but can step in 2,3 or more pixel increments

    Returns any

    JSON template_matches - for each template the diff,x,y where the difference is the best match and x,y is the template position

  • emit(eventType: string, data: Object): void
  • Call each callback that is registered for the given eventType, in the order they were registered, passing the supplied data to each.

    Parameters

    • eventType: string

      The type of the event to emit.

    • data: Object

      Data object to pass to each callback.

    Returns void

  • fill(): void
  • Draws the current path with the current brush in fill mode (fill in the middle)

    Returns void

  • fillEllipse(x: number, y: number, radiusX: number, radiusY: number, steps: number): void
  • 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'

    Parameters

    • x: number

      ellipse position

    • y: number

      ellipse position

    • radiusX: number

      x radius

    • radiusY: number

      y radius (a circle if both radius values are the same)

    • steps: number

      a larger number produces a smoother ellipse

    Returns void

  • fillRect(x: number, y: number, width: number, height: number): void
  • 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'

    Parameters

    • x: number
    • y: number
    • width: number

      width of the rectangle

    • height: number

      height of the rectangle

    Returns void

  • fillRoundedRect(x: number, y: number, width: number, height: number, radius: number): void
  • 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'

    Parameters

    • x: number
    • y: number
    • width: number

      width of the rectangle

    • height: number

      height of the rectangle

    • radius: number

      curvature of the corners

    Returns void

  • fillText(text: string, x: number, y: number, maxWidth?: number): void
  • 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)

    Parameters

    • text: string

      the text to render

    • x: number

      the position of the top left corner

    • y: number

      the position of the top left corner

    • Optional maxWidth: number

    Returns void

  • flipHorizontal(): void
  • flipHorizontal flips the canvas horizontally

    Returns void

  • flipVertical(): void
  • flipVertical flips the canvas vertically

    Returns void

  • focus(): void
  • 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();
    }

    Returns void

  • get(propertyName: string): any
  • 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'));
    }

    Parameters

    • propertyName: string

      The name of the property to get.

    Returns any

    Returned value can be of any type, or even null.

  • getHeight(): number
  • Returns the canvas height

    Returns number

  • getPixel(x: number, y: number): number
  • Returns the RGBA color value of a pixel in an image_buffer. Out of bounds requests return the color transparent black

    Parameters

    • x: number
    • y: number

    Returns number

  • getPixelData(): ArrayBuffer
  • 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 ArrayBuffer

  • getWidth(): number
  • Returns the canvas width

    Returns number

  • gradientAddPoint(color: string, position: number): void
  • 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

    Parameters

    • color: string

      the color point to add as a string such as '#DD33EE', or shorthand hex '#D3E', or include the alpha channel '0xDD33EEAA'

    • position: number

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

    Returns void

  • hsv(hue: number, saturation: number, value: number): void
  • 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

    • hue: number

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

    • saturation: number

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

    • value: number

      0 no change, (-1 to 1) -1 = dark, 1 = bright

    Returns void

  • invert(): void
  • Inverts the colors in the current canvas

    Returns void

  • lighting(brightness: number, contrast: number, shadow: number, fill: number, highlight: number, temperature: number): void
  • Applies lighting to the canvas

    Parameters

    • brightness: number

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

    • contrast: number

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

    • shadow: number

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

    • fill: number

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

    • highlight: number

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

    • temperature: number

      (-1 to 1) -1 = warm / red, 0 = unmodified, 1 = cool / blue

    Returns void

  • lineTo(x: number, y: number): void
  • 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();

    Parameters

    • x: number

      new position

    • y: number

      new position

    Returns void

  • moveTo(x: number, y: number): void
  • Moves to a new position without drawing on a path

    Parameters

    • x: number

      new position

    • y: number

      new position

    Returns void

  • on(eventType: string, callback: Function): void
  • Adds the callback function to the end of the listeners array for eventType.

    Parameters

    • eventType: string

      The type of the event.

    • callback: Function

      The callback function

    Returns void

  • peakSignalToNoiseRatio(otherImage: Component): number
  • 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.

    Parameters

    Returns number

    the calculated peak signal to noise ratio

  • prepareSvg(filename: string, svgdata: string): void
  • Preload an SVG ready to be stamped onto the canvas stampSvg

    Parameters

    • filename: string

      the svg file from the images folder

    • svgdata: string

      an alternative svg string to render

    Returns void

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

    Parameters

    Returns number

    the calculated peak signal to noise ratio

  • readAprilTags(): any
  • 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)
    }

    Returns any

    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)

  • readBarcode(): string
  • Reads a potential barcode on the canvas

    Returns string

    code - the data encoded

  • readQrcode(): string
  • Reads a potential QR code on the canvas

    Returns string

    code - the data encoded

  • rect(x: number, y: number, width: number, height: number): void
  • 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()

    Parameters

    • x: number
    • y: number
    • width: number

      width of the rectangle

    • height: number

      height of the rectangle

    Returns void

  • refresh(): void
  • Refresh this component to force it to be re-rendered, or for its dynamic data to be updated.

    Returns void

  • reset(): void
  • Refreshes the canvas with a new image buffer and resets all properties back to defaults

    Returns void

  • resetColor(color: string): void
  • Quickly updates the whole canvas to the specified color

    ctx.resetColor('0x448844FF')
    

    Parameters

    • color: string

      the color to apply to the canvas

    Returns void

  • resetTransform(): void
  • Updates the transform back to it's default value

    Returns void

  • resize(width: number, height: number, horizontalFilter: number, verticalFilter: number): void
  • Resize the canvas

    ctx.resize(canvasGetWidth(canvas)/2.0, canvasGetHeight(canvas)/2.0, 1, 1)
    

    Parameters

    • width: number

      the width and height to resize to

    • height: number

      the width and height to resize to

    • horizontalFilter: number

      0 nearest, 1 linear, 2 avg, 3 lanzcos

    • verticalFilter: number

      0 nearest, 1 linear, 2 avg, 3 lanzcos

    Returns void

  • rotate(angle: number): void
  • Rotate the canvas

    ctx.rotate(90 * Math.PI/180)
    

    Parameters

    • angle: number

      rotation angle in radians

    Returns void

  • rotateBrush(angle: number): void
  • Transform the brush - rotate to the given angle (in radians)

    ctx.rotateBrush(90 * Math.PI/180)
    

    Parameters

    • angle: number

      rotation angle in radians

    Returns void

  • roundedRect(x: number, y: number, width: number, height: number, radius: number): void
  • 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()

    Parameters

    • x: number
    • y: number
    • width: number

      width of the rectangle

    • height: number

      height of the rectangle

    • radius: number

      curvature of the corners

    Returns void

  • saveAs(filename: string, quality: number): void
  • Saves an image from the canvas to storage

    ctx.saveAs("test.png", 1)
    ctx.saveAs("test.jpg", 0.8)

    Parameters

    • filename: string

      the path and filename with extension .png or .jpg

    • quality: number

      the jpeg or png compression ratio from 0-1

    Returns void

  • scale(x: number, y: number): void
  • Updates the transform scale for the current path - this will be applied during fill or stroke

    Parameters

    • x: number
    • y: number

    Returns void

  • set(propertyName: string, value: any): void
  • set(data: Object): void
  • 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');
    }

    Parameters

    • propertyName: string

      The name of the property to set.

    • value: any

      The value to set. Can be of any type.

    Returns void

  • Set a number properties at once.

    Parameters

    • data: Object

      Data object containing property name and value pairs to set on this component.

    Returns void

  • setPixel(x: number, y: number, color: string): void
  • setPixel sets a pixel color on the current canvas

    Parameters

    • x: number

      pixel position

    • y: number

      pixel position

    • color: string

      pixel RGBA color

    Returns void

  • setPixelData(width: number, height: number, stride: number, format: PixelFormat, data: ArrayBuffer): boolean
  • Sets a new set of pixel data to the canvas in a specified format.

    Parameters

    • width: number

      the width in pixels of the data

    • height: number

      the height in pixels of the data

    • stride: number

      the number of bytes per row of the data; often the same as width * bytes per pixel

    • format: PixelFormat

      uComps:PixelFormat - the format of the data for each pixel.

    • data: ArrayBuffer

      the pixel data

    Returns boolean

    True if the data was successfully loaded into the canvas

  • setTransform(horScaling: number, vertSkewing: number, horSkewing: number, vertScaling: number, horTranslation: number, vertTranslation: number): void
  • 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);

    Parameters

    • horScaling: number

      horizontal scaling (1 = normal scale, 0.5 = half scale, 2.0 = double scale)

    • vertSkewing: number

      vertical skewing (0 = normal, negative values skew upwards )

    • horSkewing: number

      horizontal skewing (0 = normal, negative values skew left )

    • vertScaling: number

      vertical scaling (1 = normal scale, 0.5 = half scale, 2.0 = double scale)

    • horTranslation: number

      horizontal translation (0 = no change, translation in the x direction )

    • vertTranslation: number

      vertical translation (0 = no change, translation in the y direction )

    Returns void

  • skew(horSkewing: number, vertSkewing: number): void
  • Updates the transform skew for the current path - this will be applied during fill or stroke

    var ctx = uComps.cast.toCanvas(canvas);
    ctx.beginPath();
    ctx.fillRect(100, 100, 200, 200)
    ctx.strokeStyle = '#FF22FF'
    ctx.skew(0,1)

    Parameters

    • horSkewing: number

      the skew in the x direction (can be negative or positive)

    • vertSkewing: number

      the skew in the y direction (can be negative or positive)

    Returns void

  • smoothPath(steps: number): void
  • 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()

    Parameters

    • steps: number

      number of steps of smoothing (0 to 2)

    Returns void

  • stampAdaptiveThreshold(sourceCanvas: Component, srcX: number, srcY: number, srcWidth: number, srcHeight: number, dstX: number, dstY: number, strength: number, radius: number, blend: number): void
  • 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

    • sourceCanvas: Component

      the source canvas

    • srcX: number

      the source top left

    • srcY: number

      the source top left

    • srcWidth: number

      the source width

    • srcHeight: number

      the source height

    • dstX: number

      the destination position top left

    • dstY: number

      the destination position top left

    • strength: number

      -1 to 1 how strong the threshold is towards binary

    • radius: number

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

    • blend: number

      0 to 1 how much of the image is preserved vs thresholded (0.5 is a common value)

    Returns void

  • stampAutoBrightnessContrast(sourceCanvas: Component, srcX: number, srcY: number, srcWidth: number, srcHeight: number, dstX: number, dstY: number): void
  • Stamps a source canvas region onto the target canvas while calculating and applying the maximum brightness and contrast

    Parameters

    • sourceCanvas: Component

      the source canvas

    • srcX: number

      the source top left

    • srcY: number

      the source top left

    • srcWidth: number

      the source width

    • srcHeight: number

      the source height

    • dstX: number

      the destination position top left

    • dstY: number

      the destination position top left

    Returns void

  • stampAutoColor(sourceCanvas: Component, srcX: number, srcY: number, srcWidth: number, srcHeight: number, dstX: number, dstY: number): void
  • Stamps a source canvas region onto the target canvas while calculating and applying strong color saturation/balance

    Parameters

    • sourceCanvas: Component

      the source canvas

    • srcX: number

      the source top left

    • srcY: number

      the source top left

    • srcWidth: number

      the source width

    • srcHeight: number

      the source height

    • dstX: number

      the destination position top left

    • dstY: number

      the destination position top left

    Returns void

  • stampBarcode(code: string, x: number, y: number, angle: number, size: number, codeType: number, codeLevel: number): void
  • 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)

    Parameters

    • code: string

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

    • x: number

      the position

    • y: number

      the position

    • angle: number

      the angle in degrees

    • size: number

      size from 1-100 pixels per bar

    • codeType: number

      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)

    • codeLevel: number

      Some codes support redundancy levels, 1=low, 4=medium, 7=high

    Returns void

  • stampBuffer(sourceCanvas: Component, srcX: number, srcY: number, srcWidth: number, srcHeight: number, dstX: number, dstY: number): void
  • stampBuffer stamps a source canvas region onto the target canvas

    Parameters

    • sourceCanvas: Component

      the source canvas

    • srcX: number

      the source top left

    • srcY: number

      the source top left

    • srcWidth: number

      the source width

    • srcHeight: number

      the source height

    • dstX: number

      the destination position top left

    • dstY: number

      the destination position top left

    Returns void

  • stampChromaKey(sourceCanvas: Component, srcX: number, srcY: number, srcWidth: number, srcHeight: number, dstX: number, dstY: number, hue: number, hueMask: number, luminanceMask: number, maskShadow: number, maskLight: number): void
  • 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.

    Parameters

    • sourceCanvas: Component

      the source canvas

    • srcX: number

      the source top left

    • srcY: number

      the source top left

    • srcWidth: number

      the source width

    • srcHeight: number

      the source height

    • dstX: number

      the destination position top left

    • dstY: number

      the destination position top left

    • hue: number

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

    • hueMask: number

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

    • luminanceMask: number

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

    • maskShadow: number

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

    • maskLight: number

      the amount of saturated color preserved, 0 to 5, 0.9 is a good value, more means more highlights may be picked up

    Returns void

  • stampColorChannel(sourceCanvas: Component, srcX: number, srcY: number, srcWidth: number, srcHeight: number, dstX: number, dstY: number, srcChannel: number, dstChannel: number): void
  • Stamps a source canvas region onto the target canvas from one channel to another

    Parameters

    • sourceCanvas: Component

      the source canvas

    • srcX: number

      the source top left

    • srcY: number

      the source top left

    • srcWidth: number

      the source width

    • srcHeight: number

      the source height

    • dstX: number

      the destination position top left

    • dstY: number

      the destination position top left

    • srcChannel: number

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

    • dstChannel: number

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

    Returns void

  • stampHsv(sourceCanvas: Component, srcX: number, srcY: number, srcWidth: number, srcHeight: number, dstX: number, dstY: number, hue: number, saturation: number, value: number): void
  • 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

    Parameters

    • sourceCanvas: Component

      the source canvas

    • srcX: number

      the source top left

    • srcY: number

      the source top left

    • srcWidth: number

      the source width

    • srcHeight: number

      the source height

    • dstX: number

      the destination position top left

    • dstY: number

      the destination position top left

    • hue: number

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

    • saturation: number

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

    • value: number

      0 no change, (-1 to 1) -1 = dark, 1 = bright

    Returns void

  • stampImage(sourceCanvas: Component, srcX: number, srcY: number, srcWidth: number, srcHeight: number, dstX: number, dstY: number, blendMode: number, sampleMode: boolean): void
  • Combines a target image with a source image with sub pixel accuracy and different blend and sample modes.

    Parameters

    • sourceCanvas: Component

      the source canvas

    • srcX: number

      the source top left

    • srcY: number

      the source top left

    • srcWidth: number

      the source width

    • srcHeight: number

      the source height

    • dstX: number

      the destination position top left

    • dstY: number

      the destination position top left

    • blendMode: number

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

    • sampleMode: boolean

      true: default linear, false: nearest neighbor for hard edges images like barcodes

    Returns void

  • stampImageCenter(sourceCanvas: Component, srcX: number, srcY: number, srcWidth: number, srcHeight: number, dstX: number, dstY: number, scaleX: number, scaleY: number, angle: number, blendMode: number, sampleMode: boolean): void
  • Combines a target image with a centered, scaled and rotated source image with sub pixel accuracy and different blend and sample modes.

    Parameters

    • sourceCanvas: Component

      the source canvas

    • srcX: number

      the source top left

    • srcY: number

      the source top left

    • srcWidth: number

      the source width

    • srcHeight: number

      the source height

    • dstX: number

      the destination position top left

    • dstY: number

      the destination position top left

    • scaleX: number

      the scale

    • scaleY: number

      the scale

    • angle: number

      the angle in degrees

    • blendMode: number

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

    • sampleMode: boolean

      true: default linear, false: nearest neighbor for hard edges images like barcodes

    Returns void

  • stampImagePerspective(source_canvas: Component, srcP1x: number, srcP1y: number, srcP2x: number, srcP2y: number, srcP3x: number, srcP3y: number, srcP4x: number, srcP4y: number, dstP1x: number, dstP1y: number, dstP2x: number, dstP2y: number, dstP3x: number, dstP3y: number, dstP4x: number, dstP4y: number, blendmode: number): void
  • 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

    • source_canvas: Component

      the source canvas

    • srcP1x: number

      the source top left

    • srcP1y: number

      the source top left

    • srcP2x: number

      the source top right

    • srcP2y: number

      the source top right

    • srcP3x: number

      the source bottom right

    • srcP3y: number

      the source bottom right

    • srcP4x: number

      the source bottom left

    • srcP4y: number

      the source bottom left

    • dstP1x: number

      the destination top left

    • dstP1y: number

      the destination top left

    • dstP2x: number

      the destination top right

    • dstP2y: number

      the destination top right

    • dstP3x: number

      the destination bottom right

    • dstP3y: number

      the destination bottom right

    • dstP4x: number

      the destination bottom left

    • dstP4y: number

      the destination bottom left

    • blendmode: number

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

    Returns void

  • stampImageWarp(sourceCanvas: Component, srcX: number, srcY: number, srcWidth: number, srcHeight: number, dstP1x: number, dstP1y: number, dstP2x: number, dstP2y: number, dstP3x: number, dstP3y: number, dstP4x: number, dstP4y: number, blendmode: number): void
  • Combines a target image with a source image with sub pixel accuracy applying an affine warp with different blend and sample modes.

    Parameters

    • sourceCanvas: Component

      the source canvas

    • srcX: number

      the source top left

    • srcY: number

      the source top left

    • srcWidth: number

      the source width

    • srcHeight: number

      the source height

    • dstP1x: number

      the destination top left

    • dstP1y: number

      the destination top left

    • dstP2x: number

      the destination top right

    • dstP2y: number

      the destination top right

    • dstP3x: number

      the destination bottom right

    • dstP3y: number

      the destination bottom right

    • dstP4x: number

      the destination bottom left

    • dstP4y: number

      the destination bottom left

    • blendmode: number

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

    Returns void

  • stampKernel(sourceCanvas: Component, srcX: number, srcY: number, srcWidth: number, srcHeight: number, dstX: number, dstY: number, mode: RgbMode, divider: number, k1: number, k2: number, k3: number, k4: number, k5: number, k6: number, k7: number, k8: number, k9: number): void
  • 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

    Parameters

    • sourceCanvas: Component

      the source canvas

    • srcX: number

      the source top left

    • srcY: number

      the source top left

    • srcWidth: number

      the source width

    • srcHeight: number

      the source height

    • dstX: number

      the destination position top left

    • dstY: number

      the destination position top left

    • mode: RgbMode

      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

    • divider: number

      sum all of the 3x3 kernel then divide by this value

    • k1: number

      k1 to k9: the three by three kernel

    • k2: number
    • k3: number
    • k4: number
    • k5: number
    • k6: number
    • k7: number
    • k8: number
    • k9: number

    Returns void

  • stampLighting(sourceCanvas: Component, srcX: number, srcY: number, srcWidth: number, srcHeight: number, dstX: number, dstY: number, brightness: number, contrast: number, shadow: number, fill: number, highlight: number, temperature: number): void
  • Stamps a source canvas region onto the target canvas while applying lighting

    Parameters

    • sourceCanvas: Component

      the source canvas

    • srcX: number

      the source top left

    • srcY: number

      the source top left

    • srcWidth: number

      the source width

    • srcHeight: number

      the source height

    • dstX: number

      the destination position top left

    • dstY: number

      the destination position top left

    • brightness: number

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

    • contrast: number

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

    • shadow: number

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

    • fill: number

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

    • highlight: number

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

    • temperature: number

      (-1 to 1) -1 = warm / red, 0 = unmodified, 1 = cool / blue

    Returns void

  • stampMinMaxBlend(sourceCanvas: Component, srcX: number, srcY: number, srcWidth: number, srcHeight: number, dstX: number, dstY: number, minBlend: number, maxBlend: number): void
  • 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

    • sourceCanvas: Component

      the source canvas

    • srcX: number

      the source top left

    • srcY: number

      the source top left

    • srcWidth: number

      the source width

    • srcHeight: number

      the source height

    • dstX: number

      the destination position top left

    • dstY: number

      the destination position top left

    • minBlend: number

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

    • maxBlend: number

      (0 to 255) if one of the pixels is > max_blend brightness then take the darkest (remove extreme e.g. glare)

    Returns void

  • stampMorphological(sourceCanvas: Component, srcX: number, srcY: number, srcWidth: number, srcHeight: number, dstX: number, dstY: number, mode: RgbMode, operator: Operator, threshold: number): void
  • 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.

    Parameters

    • sourceCanvas: Component

      the source canvas

    • srcX: number

      the source top left

    • srcY: number

      the source top left

    • srcWidth: number

      the source width

    • srcHeight: number

      the source height

    • dstX: number

      the destination position top left

    • dstY: number

      the destination position top left

    • mode: RgbMode

      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

    • operator: Operator

      uComps.Operator: 0 - THRESEHOLD, 1 ERODE, 2 - DILATE, 3 - GRADIENT, 4 - BOUNDARY, 5 - HIT_AND_MISS_CORNER, 6 - THINNING

    • threshold: number

      Normally 128. Below this is black, above this is white.

    Returns void

  • stampQr(code: string, x: number, y: number, angle: number, size: number, codeLevel: number): void
  • Stamps a QRcode onto the canvas

    ctx.stampQr("QRCODE",1260,700,0,19,1)
    

    Parameters

    • code: string

      the text/numbers to encode

    • x: number

      the position

    • y: number

      the position

    • angle: number

      the angle in degrees

    • size: number

      size from 1-100 pixels per bar

    • codeLevel: number

      Redundancy level, 1=low, 4=medium, 7=high

    Returns void

  • stampSvg(x: number, y: number, xratio: number, yratio: number, degrees: number): void
  • 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)

    Parameters

    • x: number

      the position

    • y: number

      the position

    • xratio: number

      the scale width (1 = no scaling)

    • yratio: number

      the scale height (1 = no scaling)

    • degrees: number

    Returns void

  • stroke(): void
  • Draws the current path with the current brush (draw the outside)

    Returns void

  • strokeEllipse(x: number, y: number, radiusX: number, radiusY: number, steps: number): void
  • 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'

    Parameters

    • x: number

      ellipse position

    • y: number

      ellipse position

    • radiusX: number

      x radius

    • radiusY: number

      y radius (a circle if both radius values are the same)

    • steps: number

      a larger number produces a smoother ellipse

    Returns void

  • strokeRect(x: number, y: number, width: number, height: number): void
  • 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'

    Parameters

    • x: number
    • y: number
    • width: number

      width of the rectangle

    • height: number

      height of the rectangle

    Returns void

  • strokeRoundedRect(x: number, y: number, width: number, height: number, radius: number): void
  • 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'

    Parameters

    • x: number
    • y: number
    • width: number

      width of the rectangle

    • height: number

      height of the rectangle

    • radius: number

      curvature of the corners

    Returns void

  • strokeText(text: string, x: number, y: number, maxWidth?: number): void
  • 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)

    Parameters

    • text: string

      the text to render

    • x: number

      the position of the top left corner

    • y: number

      the position of the top left corner

    • Optional maxWidth: number

    Returns void

  • textWidth(text: string): number
  • 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);

    Parameters

    • text: string

      the text to measure

    Returns number

    width - the width of the text if it was rendered

  • toTexture(outputTexture: any): void
  • Sends the canvas image to the texture target on the GPU for 3D rendering

    Parameters

    • outputTexture: any

      the target texture

    Returns void

  • transform(horScaling: number, vertSkewing: number, horSkewing: number, vertScaling: number, horTranslation: number, vertTranslation: number): void
  • 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();

    Parameters

    • horScaling: number

      horizontal scaling (1 = normal scale, 0.5 = half scale, 2.0 = double scale)

    • vertSkewing: number

      vertical skewing (0 = normal, negative values skew upwards )

    • horSkewing: number

      horizontal skewing (0 = normal, negative values skew left )

    • vertScaling: number

      vertical scaling (1 = normal scale, 0.5 = half scale, 2.0 = double scale)

    • horTranslation: number

      horizontal translation (0 = no change, translation in the x direction )

    • vertTranslation: number

      vertical translation (0 = no change, translation in the y direction )

    Returns void

  • translate(x: number, y: number): void
  • Updates the transform translation for the current path - this will be applied during fill or stroke

    Parameters

    • x: number

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

    • y: number

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

    Returns void

  • tween(seconds: number, params: Object, type?: TweenType): void
  • Tween a component property over time.

    Parameters

    • seconds: number

      The number of seconds to tween for.

    • params: Object

      An objects that contains key/value pairs of the properties and values to tween.

    • Optional type: TweenType

      (Optional) Tween type can be any type from "Tween.type"

    Returns void

  • wedge(x: number, y: number, radiusX: number, radiusY: number, startAngle: number, endAngle: number, thickness: number): void
  • 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();

    Parameters

    • x: number

      center of the wedge

    • y: number

      center of the wedge

    • radiusX: number

      x radius

    • radiusY: number

      y radius (a circle if both radius values are the same)

    • startAngle: number

      start angle in radians

    • endAngle: number

      end angle in radians

    • thickness: number

      0 is no thickness (just follows the circumference), 1 is a wedge right to the center of the ellipse, 0.5 is halfway

    Returns void