Tabris.js Widgets: Canvas

This is a widget that can be used to draw graphics using a canvas context, which is a subset of the HTML5 CanvasRenderingContext2D. Just like with a <canvas> tag it allows you to create simple geometrical figures, make animations, text and load images from source.

Here is how a simple Canvas looks:

Canvas class got only one method – getContext() which returns the CanvasContext instance, which holds all the necessary functions for drawing.

Most of the CanvasContext tools are simple and straightforward to use. Notice at the example below that the description text for each image is a part of Canvas too instead of being TextView instance:

Great use for Canvas is interactive diagrams and animations. Run the animation example using QR code below to see it in action:

And if you want to see a high-detailed image or don’t want to draw everything from scratch, you can also load an image and add it on Canvas:

This way you can use a custom background for Canvas, a grid for a diagram, for example. Or you can allow users to upload images and place text over them. And since we are talking about placing a text on Canvas – here is how it will look depending on displaying mode:

For more detailed information about the widget, use the Canvas documentation page.