Canvas is a sophisticated palette of drawing and analysis capabilities to let you both construct 2D images using vector and bitmap graphics but also to use image processing to retrieve information. Canvas is an RGBA pixel buffer you can load images, draw shapes, perform per pixel and per kernel operations.

This tutorial will guide you through some of the ways you can use Canvas within Umajin.

Setting up Canvas

1. Add a Canvas Component to a page in your project.
2. By default a background color is set, but an image can also be used as a background.
3. The size of the canvas defaults to 500 by 500 pixels, or the size of the image.

Create a Custom Action

For all of these examples, you will need to create a custom action (the same one can be used and copied over for each example).

1. Select File > Open with Visual Studio Code
2. Right click on the Scripts folder and select New File.
3. Name the file with a “.js” extension.
4. Copy the code below to create the outline of your custom action:

var uComps = require('u-components');
var uActions = require('u-actions');
var Action = uActions.Action;

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

}

Note: ctx.clear() is used to clear the canvas, which can be useful when we are creating a number of different examples.

Add an Action to a Button

To run the examples, let’s attach the newly made custom action to a button.

1. Add a Button component to your project.
2. Click the plus button next to the On Press event of the button and select “Canvas Example” from the Custom menu.
3. Select the canvas component as the parameter for the action.

Drawing a Shape

Canvas supports drawing rectangles, ellipses, and paths. Other shapes need to be created from a series of paths. There are 3 types of rectangles available; filled, stroke (outline), and rounded.

Filled Rectangle

Here is code for a filled rectangle:

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

    ctx.fillStyle  = '#2D65FF'
    ctx.fillRect(10,10,200,200)

}

If you want to draw more than one rectangle, you can use the transform method:

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

    ctx.fillStyle  = '#2D65FF'
    ctx.fillRect(10,10,200,200)
    ctx.transform(1, 0, 0, 1, 110, 110);
   
    ctx.fillStyle  = '#449122'
    ctx.fillRect(10,10,200,200)
    ctx.resetTransform();
}

Stroke Rectangle

A stroke rectangle will draw the outline of a rectangle:

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

    ctx.strokeStyle  = '#2D65FF'
    ctx.strokeRect(10,10,200,200)

}

Rounded Rectangle

Rectangles with rounded corners can also be created:

new Action('Canvas Example', canvasExample) 
.addParameter('Canvas', uActions.ParamType.CANVAS) 
.register(); 
function canvasExample(canvas) { 
    var ctx = uComps.cast.toCanvas(canvas); 
    ctx.clear(); 
    ctx.beginPath();
    ctx.strokeStyle = '#319645';
    ctx.strokeRoundedRect(10,10,200,100,20);
    ctx.transform(1, 0, 0, 1, 110, 60); 
    ctx.fillStyle = '#FFD800';
    ctx.fillRoundedRect(10,10,200,100, 10);
    ctx.resetTransform(); 
}

Drawing an Ellipse

This example draws an ellipse, and uses a gradient fill. Gradients are defined with a start and end color, brushMode, brushAngle, and brushPosition.
You will also notice that this example defines colors in 2 different ways; as an integer value (with transparency as the last 2 digits), or hexadecimal.

new Action('Canvas Example', canvasExample) 
.addParameter('Canvas', uActions.ParamType.CANVAS) 
.register(); 
function canvasExample(canvas) { 
    var ctx = uComps.cast.toCanvas(canvas); 
    ctx.clear(); 
    ctx.beginPath();
    ctx.brushGradientStart('0x0026FFAA');
    ctx.brushGradientEnd('#D3E');
    ctx.brushMode = uComps.BrushMode.LINEAR_GRADIENT;
    ctx.brushAngle = 45;
    ctx.brushPosition(150, 200);
    ctx.fillEllipse(250,200,150,150);
}