You are here: Canvas Widget > Canvas Widget Basics > Create a Canvas Widget

Canvas Widget

The Canvas widget behaves as a drawing board that allows you to draw shapes such as circles, polygons, lines, etc. on your app. Currently, you can only use Canvas widget to draw lines.

You can create Canvas widget only by using code.

You can draw shapes in a Canvas widget by using the shapesData property. In addition, you can append or remove multiple shapes in the Canvas widget by using the addShapes and removeShapes methods. Furthermore, you can update the configurations of the shapes by using the updateShapes method. You can also delete all the shapes that you have created in the Canvas widget by using the clear method.

The functionalities that can be implemented by using Canvas widget are as follows:

Shapes Configuration
3D Touch
Layout
UI Appearance
User Input Handling
Configurations Common To All Widgets

Shapes Configuration

Properties	Description
shapesData	This property helps you to specify the configuration of the shapes that you draw in a Canvas widget.

Methods	Description
addShapes	This method helps you to add shapes to a Canvas widget.
clear	This method deletes all the shapes that you have drawn in a Canvas widget.
removeShapes	This method deletes specific shapes that you have drawn in a Canvas widget.
updateShapes	This method helps you to update the positional parameters of the shapes inside a Canvas widget.

3D Touch

Methods	Description
registerForPeekandPop	This method registers a Canvas widget to enable 3D Touch peek and pop gestures.
setOnPeek	This method sets and overrides the existing onPeekCallback event for a Canvas widget.
setOnPop	This method overrides the existing onPopCallback event for a Canvas widget.
unregisterForPeekandPop	This method unregisters a Canvas widget from 3D Touch peek and pop gestures.

Layout

Events	Description
doLayout	This event is invoked for a Canvas widget when the widget's position and dimensions are computed.

Properties	Description
bottom	This property determines the bottom edge of a Canvas widget and is measured from the bottom bounds of the parent container.
centerX	This property determines the center of a Canvas widget measured from the left bounds of the parent container.
centerY	This property determines the center of a Canvas widget measured from the top bounds of the parent container.
height	This property determines the height of a Canvas widget and measured along the y-axis.
left	This property determines the lower left corner edge of a Canvas widget and is measured from the left bounds of the parent container.
maxHeight	This property specifies the maximum height of a Canvas widget and is applicable only when the height property is not specified.
maxWidth	This property specifies the maximum width of a Canvas widget and is applicable only when the width property is not specified.
minHeight	This property specifies the minimum height of a Canvas widget and is applicable only when the height property is not specified.
minWidth	This property specifies the minimum width of a Canvas widget and is applicable only when the width property is not specified.
right	This property determines the lower right corner of a Canvas widget and is measured from the right bounds of the parent container.
top	This property determines the top edge of a Canvas widget and measured from the top bounds of the parent container.
width	This property determines the width of a Canvas widget and is measured along the x-axis.
zIndex	Specifies the stack order of a widget.

UI Appearance

Properties	Description
opacity	This property specifies the opacity of a Canvaswidget.
skin	This property specifies the look and feel of a Canvas widget.

User Input Handling

Events	Description
onScrollWidgetPosition	This event callback is invoked by the platform when the widget location position changes on scrolling.
onTouchEnd	An event callback is invoked by the platform when the user touch is released from the touch surface.
onTouchMove	An event callback is invoked by the platform when the touch moves on the touch surface continuously until the movement action ends.
onTouchStart	An event callback is invoked by the platform when a user touches the touch surface.

Methods	Description
addGestureRecognizer	Allows you to set a gesture recognizer for a specific gesture for Canvas widget.
removeGestureRecognizer	Allows you to remove the specific gesture recognizer for Canvas widget.
setGestureRecognizer	Allows you to set a gesture recognizer for a specific gesture for Canvas widget.

Configurations Common To All Widgets

Methods	Description
clone	When this method is used on a Canvas widget, then a Canvas widget is cloned.
convertPointFromWidget	Allows you to convert the coordinate system from a Canvas widget to a point (receiver's coordinate system).
convertPointToWidget	Allows you to convert the coordinate system from a Canvas widget to a point (receiver's coordinate system).
removeFromParent	Allows you to remove a Canvas widget from a parent widget.
setVisibility	Use this method to set the visibility of a Canvas widget.

Properties	Description
cursorType	Specifies the type of the mouse pointer used.
id	id is a unique identifier of a Canvas widget consisting of alpha numeric characters.
isVisible	This property controls the visibility of a Canvas widget on the form.
info	A custom JSObject with the key value pairs that you can use to store the context with a Canvas widget.
parent	This property helps you access the parent of a Canvas widget.

Canvas Widget Basics

Canvas widget helps you to draw shapes such as lines (in any orientation), circles, and rectangles in your application.

Some real-world scenarios where you can use a Canvas widget are as follows:

To use as a line separator when a list of items is mentioned.
To display more than one focal point on a web-page, use dashed/ dotted lines to divide the page.
To highlight a feature newly introduced in an app such as coupons, and updates.

Create a Canvas Widget

You can create a Canvas widget is created by using a constructor with the following attributes.

basicConf: A JavaScript object that contains the basic properties of Canvas widget, including the shapesData property.
layoutConf: A JavaScript object that contains the layout properties of Canvas widget.
pspConf: A JavaScript object that contains the platform-specific properties of Canvas widget.

Example

// Sample code to create a Canvas widget with a red-dashed line.
var basicConf = {
    "height": "200px",
    "id": "canvasWidgetRef",
    "isVisible": true,
    "left": "10%",
    "skin": "skinCanvas",
    "top": "10%",
    "width": "200px",
    "zIndex": 1,
    //Code to add the configuration of the shape with shapeid:shape1. 
    "shapesData": [{
        "shapeid": "shape1",
        "shapeType": kony.canvas.SHAPE_TYPE_LINE,
        "lineStyle": kony.canvas.LINE_STYLE_DASHED,
        "lineStyleConfig": ["1px", "1px"],
        "thickness": "2px",
        "points": [
            ["10px", "10px"],
            ["100px", "10px"]
        ],
        strokeColor: "ff000000",
    }]
};
var layoutConf = {
          "marginInPixel": false,
        };
var pspConf = {};

//Creating the Canvas widget
var canvas = new kony.ui.Canvas(basicConf, layoutConf, pspConf);

Last updated on : 24 May, 2022prem