The Canvas widget behaves as a drawing board that allows you to draw shapes such as circles, polygons, lines, etc. on your app. Currently, Canvas widget can be used to draw only lines.
The Canvas widget can be created only by using code.
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.
The Canvas widget capabilities can be broadly categorized into the following:
The Canvas widget enables you to draw shapes like lines (in any orientation), circles, rectangle, etc. in your application. Canvas widget draws the shapes inside its view bounds, by using the shape configurations provided in the shapesData property.
Creating a Canvas Widget Using the Constructor: kony.ui.Canvas
var myCanvas = new kony.ui.Canvas(basicConf, layoutConf, pspConf);
basicConf is an object with basic properties.
layoutConf is an object with layout properties.
pspConf is an object with platform specific properties.
Example
// Defining properties for a Canvas widget with the id:canvasWidgetRef
var basicConf = {
"height": "200px",
"id": "canvasWidgetRef",
"isVisible": true,
"left": "10%",
"skin": "skinCanvas",
"top": "10%",
"width": "200px",
"zIndex": 1,
//Adding the configuration of the shape with shapeid:shape1.
"shapesData": [{
"shapeid": "shape1",
"shapeType": kony.canvas.SHAPE_TYPE_LINE,
"lineStyle": kony.canvas.LINE_STYLE_DOTTED,
"lineStyleConfig": ["1px", "1px"],
"thickness": "2px",
"points": [
["10px", "10px"],
["100px", "10px"]
],
strokeColor: "ff000000",
}]
};
var layoutConf = {};
var pspConf = {};
//Creating the Canvas widget
var canvas = new kony.ui.Canvas(basicConf, layoutConf, pspConf);
