Zebra API Doc

zebra.ui.zCanvas Class

Extends zebra.ui.Panel

zCanvas zebra UI component class. This is one of the key class everybody has to use to start building an UI. The class is a wrapper
for HTML Canvas element. Internally it catches all native HTML Canvas events and translates its into Zebra UI events.

zCanvas instantiation triggers a new HTML Canvas will be created and added to HTML DOM tree. It happens if developer doesn't pass an HTML Canvas element reference or an ID of existing HTML Canvas element If developers need to re-use an existent in DOM tree canvas element they have to pass id of the canvas that has to be used as basis for zebra UI creation or reference to a HTML Canvas element:

  // a new HTML canvas element is created and added into HTML DOM tree
  var canvas = zebra.ui.zCanvas();

  // a new HTML canvas element is created into HTML DOM tree
  var canvas = zebra.ui.zCanvas(400,500);  // pass canvas size 

  // stick to existent HTML canvas element 
  var canvas = zebra.ui.zCanvas("ExistentCanvasID");  

The zCanvas has layered structure. Every layer is responsible for showing and controlling a dedicated type of UI elements like windows pop-up menus, tool tips and so on. Developers have to build an own UI hierarchy on the canvas root layer. The layer is standard UI panel that is accessible as zCanvas component instance "root" field.

  // create canvas
  var canvas = zebra.ui.zCanvas(400,500); 

  // save reference to canvas root layer where 
  // hierarchy of UI components have to be hosted 
  var root = canvas.root;

  // fill root with UI components
  var label = new zebra.ui.Label("Label");



  • [element]
  • [width]
  • [height]


  • [element] String | Canvas optional

    an ID of a HTML canvas element or reference to an HTML Canvas element.

  • [width] Integer optional

    a width of an HTML canvas element

  • [height] Integer optional

    a height of an HTML canvas element



  • id
  • e

Catch native canvas mouse move events


  • id String

    an touch id (for touchable devices)

  • e String

    a mouse event that has been triggered by canvas element

            pageX : {Integer},
            pageY : {Integer},
            target: {HTMLElement}



Stretch Canvas to occupy full screen area


  • id

Get the canvas layer by the specified layer ID. Layer is a children component of the canvas UI component. Every layer has an ID assigned to it the method actually allows developers to get the canvas children component by its ID


  • id String

    a layer ID

Return: zebra.ui.Panel

a layer (children) component


  • name
  • value

Set HTML Canvas element hosted by the UI component attribute


  • name String

    an attribute name

  • value String

    an attribute value


  • styles

Set HTML canvas element hosted by the UI component CSS styles


  • styles Object

    styles to be applied to the HTML canvas component



Object x:Integer, y:Integer, width:Integer, height:Integer private

Keeps rectangular "dirty" area of the canvas component


Canvas protected readonly

Reference to HTML Canvas element where the zebra canvas UI components are hosted


Boolean readonly

Indicate if the canvas has to be stretched to fill the whole screen area.



Implement the event handler method to catch canvas initialized event. The event is triggered once the canvas has been initiated and all properties listeners of the canvas are set upped. The event can be used to load saved data.

var p = new zebra.ui.zCanvas(300, 300, [
     function canvasInitialized() {
         // do something