Canvas Designer / API Referencee

Demo: https://www.webrtc-experiment.com/Canvas-Designer/

Advance Demo: demos/dashboard/

Multiple designers demo: https://www.webrtc-experiment.com/Canvas-Designer/multiple.html

YouTube video:

• https://www.youtube.com/watch?v=pvAj5l_v3cM

> "Collaborative" Canvas Designer i.e. Canvas-Drawing tool allows you draw bezier/quadratic curves, rectangles, circles and lines. You can also set strokes, back/forth colors and much more. You can draw using pencils, erase drawing, type texts etc. You can easily add your own tools.

You can check all releases here:

• https://github.com/muaz-khan/Canvas-Designer/releases

The specialty of this drawing-tool is that, it generates Canvas2D code for you; so simply draw and get the code! That code can be used in any javascript Canvas2D application.

You can submit issues here:

• https://github.com/muaz-khan/Canvas-Designer/issues

Also, you can collaborate your drawing with up to 15 users; and everything is synced from all users. So, if you draw a line and your friend-A draws quadratic curve and friend-B draws rectangle then everything will be synced among all users!

Youtube Videos

• https://www.youtube.com/watch?v=oSSwMlBu8SY

Gif images:

• https://cdn.webrtc-experiment.com/images/Canvas-Designer.gif

Built-in tools

You can use designer.setSelected or designer.setTools for below tools.

1. line --- to draw straight lines
2. pencil --- to write/draw shapes
3. dragSingle --- to drag/ove and especially resize last selected shape
4. dragMultiple --- to drag/move all shapes
5. eraser --- to erase/clear specific portion of shapes
6. rectangle --- to draw rectangles
7. arc --- to draw circles
8. bezier --- to draw bezier curves
9. quadratic --- to draw quadratic curves
10. text --- to write texts on single or multiple lines, select font families/sizes and more
11. image --- add external images
12. arrow --- draw arrow lines
13. marker --- draw markers
14. lineWidth --- set line width
15. colorsPicker --- background and foreground colors picker
16. extraOptions --- extra options eg. lineCap, lineJoin, globalAlpha, globalCompositeOperation etc.
17. pdf --- to import PDF
18. code --- to enable/disable code view
19. undo --- undo recent shapes

The correct name for dragSingle should be: drag-move-resize last-selected-shape.

The correct name for dragMultiple should be: drag-move all-shapes.

Upcoming tools

1. Allow users to add video-streams or screen-streams or existing-webm-mp4-videos
2. Resize all shapes at once (currently you can resize last selected shape only)

Features

1. Draw single or multiple shapes of any kind (according to toolbox)

2. Drag/resize/adjust all the shapes in any possible direction

3. Rectangles and images can be resized in 4-directions

   Red transparent small circles helps you understand how to resize.

4. Undo drawings using ctrl+z keys (undo all shapes, undo last 10 or specific shapes, undo range of shapes or undo last shape)

5. Drag/move single or all the shapes without affecting any single coordinate

More importantly, you can use unlimited designers on a single page. Each will have its own surface and its own tools.

Chinese, Arabic, other languages

You can install following chrome extension for multi-language input tools:

• https://chrome.google.com/webstore/detail/google-input-tools/mclkkofklkfljcocdinagocijmpgbhab?hl=en

Now type your own language text in any <input> box or anywhere, and simply copy that text.

Now click T tool icon from the tool-box and press ctrl+v to paste your own language's text.

To repeat it:

1. Type your own language texts anywhere and make sure to copy to clipboard using ctrl+v
2. Then click T icon, and then press ctrl+v to paste your copied text

You can paste any text: English, Arabic, Chinese etc.

How to Use

1. Download/link canvas-designer-widget.js from this github repository.

2. Set designer.widgetHtmlURL and designer.widgetJsURL in your HTML file.

3. Use this command to append widget in your HTML page:

   var designer = new CanvasDesigner();

   designer.appendTo(document.body);

You can even download TAR:

mkdir Canvas-Designer && cd Canvas-Designer
wget https://dl.webrtc-experiment.com/canvas-designer.tar.gz
tar -zxvf canvas-designer.tar.gz
ls -a

• For windows, use 7Zip or WinRAR to extract this: canvas-designer.tar.gz

Complete Usage

var designer = new CanvasDesigner();

websocket.onmessage = function(event) {
    designer.syncData( JSON.parse(event.data) );
};

designer.addSyncListener(function(data) {
    websocket.send(JSON.stringify(data));
});

designer.setSelected('pencil');

designer.setTools({
    pencil: true,
    text: true
});

designer.appendTo(document.documentElement);

It is having designer.destroy() method as well.

Use WebRTC!

webrtc.onmessage = function(event) {
    designer.syncData( event.data );
};

designer.addSyncListener(function(data) {
    webrtc.send(data);
});

Use Socket.io

socket.on('message', function(data) {
    designer.syncData( data );
});

designer.addSyncListener(function(data) {
    socket.emit('message', data);
});

API Reference

widgetHtmlURL

You can place widget.html file anywhere on your site.

designer.widgetHtmlURL = '/html-files/widget.html';

By default widget.html is placed in the same directory of index.html.

// here is default value
designer.widgetHtmlURL = 'widget.html';

Remember, widget.html is loaded using `