EnableX Whiteboard is an independent library shared over GitHub and through the Developer Center. It helps application developers to quickly deploy a Whiteboard, with streaming and collaboration among session participants.

  • The EnableX Whiteboard has all basic tools inbuilt
  • It is developed using Open Source Fabric.js

Note: To extend this feature and create a richer set of Tools, you are free to do so using the Fabric.js library.

How to Integrate?

Follow these steps:

  • Download the EnableX Whiteboard Library .
  • Extract the downloaded library.
  • Move the EnxWB.js and EnxWB.js.map files to a designated folder within Virtual Root.
  • Use the EnxWB.js file in your HTML through SCRIPT Tag.
  • Refer to the following Methods section to know how to initiate, create, stream, and collaborate on Whiteboard among other participants in your Session.

SDK Methods

Initiate Whiteboard

Create an Object of EnxWb Class with a JSON Payload to define Whiteboard UI Components.

Sample Code

var wbObject = new EnxWb(
{ canvasId: 'wb', // id of the Canvas DOM Element
initialWidth: 1000,
initialHeight: 500,
scheme : 'default'

Parameter: A JSON Object, attributes explained below:

canvasIdThe HTML CANVAS Element ID which will be used with the Whiteboard
initialWidthWidth of the Whiteboard in pixels
initialHeightHeight of the Whiteboard in pixels
schemeIt is a scheme / template definition of the Whiteboard UI Components. You can use default scheme. In case you want to re-define it, use custom scheme
Note: When you use custom scheme, you need to define each UI component separately, using a new object called custom in the JSON payload
customOptional. In case, you are using scheme : custom, it is the Custom Scheme definition object
Var wbObject = new EnxWb(
{ canvasId: 'wb', // id of the canvas
initialWidth: 1000,
initialHeight: 500,
scheme : 'custom',
custom: {
bgColor : 'red', // WB Backbround
toolbarBGColor : 'black', // Toolbar Background
brushColor:'black', // Default Brush Color
icon : { // Toolbar Icon definition
size: 'medium', // Enum: small, large, medium
type: 'rounded-square', // Enum: square,rounded-square
BGColor: '#f3f3f3', // Tool Background
FGColor: '#000000', // Tool Foreground
border: '1px solid grey'// Tool Border

Create Whiteboard

You need to draw the Whiteboard to make it appear in the HTML DOM using the EnxWb.create() method.

  • Method: EnxWb.create( EnxRoom-Object )
  • Parameter:
    EnxRoom-ObjectIt is the Room Object with which the Whiteboard gets connected for streaming and collaboration

Start/Stop Whiteboard Streaming

If you want to start streaming your Whiteboard, the contents are viewable to remote participants as a video stream and playable in a Video Player. The streamed Whiteboard may also be recorded for future reference.

**Methods: **

  • EnxWb.startStreaming(): To start streaming
  • EnxWb.stopStreaming(): To stop streaming

Note: The Whiteboard Toolbar has toggle buttons to start / stop streaming. Methods explained above are called toggling the buttons. However, these methods are made accessible to create your own UI to start / stop streaming.

Start/Stop Whiteboard Collaboration

If you want to collaborate using Whiteboard with other participants, they can use the Whiteboard. When you share the Whiteboard with others, the UI Component appears in the View in HTML DOM.


  • EnxWb.startCollaboration() : To start collaboration with others
  • EnxWb.stopStreaming() : To stop collaboration with others

Note: The Whiteboard Toolbar has toggle buttons to start/stop Whiteboard Collaboration. The methods explained above are called by toggling these buttons. However, these methods are accessible to you to create your UI to start / stop Collaboration.

Whiteboard Collaboration with designated Participant

If you want to collaborate using Whiteboard with a specific participant, they will also be able to use the Whiteboard. When you share the Whiteboard with a participant, the UI Component appears in the View in HTML DOM, at the designated participants' endpoint.


Method: EnxWb.shareWith(clientId) : To start collaboration with participant specified by clientId parameter Parameters:

  • clientId : Client ID of the participant whom you wish to grant Collaboration Rights

Note: When you collaborate using Whiteboard with all participants, you still need to use the shareWith() method to share the whiteboard with any new participant who has joined the session after the initial startCollaboration() was invoked. To do so, refer to the following sample code:

// A new user connected. user JSON has user information
room.addEventListener("user-connected", function(event) {
// Share the Whiteboard for Collaboration