
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
canvas-designer
Advanced tools
Collaborative, extendable, JavaScript Canvas2D drawing tool, supporting dozens of builtin tools, as well as generates JavaScript code for 2D animations.
Multiple designers demo: https://www.webrtc-experiment.com/Canvas-Designer/multiple.html
"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:
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:
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!
Gif images:
You can use designer.setSelected
or designer.setTools
for below tools.
line
--- to draw straight linespencil
--- to write/draw shapesdragSingle
--- to drag/ove and especially resize last selected shapedragMultiple
--- to drag/move all shapeseraser
--- to erase/clear specific portion of shapesrectangle
--- to draw rectanglesarc
--- to draw circlesbezier
--- to draw bezier curvesquadratic
--- to draw quadratic curvestext
--- to write texts on single or multiple lines, select font families/sizes and moreimage
--- add external imagesarrow
--- draw arrow linesmarker
--- draw markerslineWidth
--- set line widthcolorsPicker
--- background and foreground colors pickerextraOptions
--- extra options eg. lineCap, lineJoin, globalAlpha, globalCompositeOperation etc.pdf
--- to import PDFcode
--- to enable/disable code viewundo
--- undo recent shapesThe correct name for dragSingle
should be: drag-move-resize last-selected-shape
.
The correct name for dragMultiple
should be: drag-move all-shapes
.
Draw single or multiple shapes of any kind (according to toolbox)
Drag/resize/adjust all the shapes in any possible direction
Rectangles and images can be resized in 4-directions
Red transparent small circles helps you understand how to resize.
Undo drawings using ctrl+z
keys (undo all shapes, undo last 10 or specific shapes, undo range of shapes or undo last shape)
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.
You can install following chrome extension for multi-language input tools:
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:
ctrl+v
T
icon, and then press ctrl+v
to paste your copied textYou can paste any text: English, Arabic, Chinese etc.
Download/link canvas-designer-widget.js
from this github repository.
Set designer.widgetHtmlURL
and designer.widgetJsURL
in your HTML file.
Use this command to append widget in your HTML page:
var designer = new CanvasDesigner();
designer.appendTo(document.body);
<!-- 1st step -->
<script src="https://cdn.webrtc-experiment.com/Canvas-Designer/canvas-designer-widget.js"></script>
<!-- 2nd step -->
<script>
var designer = new CanvasDesigner();
// both links are mandatory
// widget.html will internally use widget.js
designer.widgetHtmlURL = 'https://cdn.webrtc-experiment.com/Canvas-Designer/widget.html'; // you can place this file anywhere
designer.widgetJsURL = 'https://cdn.webrtc-experiment.com/Canvas-Designer/widget.js'; // you can place this file anywhere
</script>
<!-- 3rd i.e. last step -->
<script>
// <iframe> will be appended to "document.body"
designer.appendTo(document.body || document.documentElement);
</script>
You can even download TAR:
mkdir Canvas-Designer && cd Canvas-Designer
wget http://dl.webrtc-experiment.com/canvas-designer.tar.gz
tar -zxvf canvas-designer.tar.gz
ls -a
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.
webrtc.onmessage = function(event) {
designer.syncData( event.data );
};
designer.addSyncListener(function(data) {
webrtc.send(data);
});
socket.on('message', function(data) {
designer.syncData( data );
});
designer.addSyncListener(function(data) {
socket.emit('message', data);
});
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 <iframe>
.
widgetJsURL
Note: This file is internally used by
widget.html
.
You can place widget.html
file anywhere on your site.
designer.widgetJsURL = '/js-files/widget.min.js';
By default widget.min.js
is placed in the same directory of index.html
.
// here is default value
designer.widgetJsURL = 'widget.min.js';
Remember, widget.js
is loaded using <iframe>
.
syncData
Pass array-of-points that are shared by remote users using socket.io or websockets or XMPP or WebRTC.
designer.syncData(arrayOfPoints);
clearCanvas
Remove and clear all drawings from the canvas:
designer.clearCanvas();
addSyncListener
This callback is invoked as soon as something new is drawn. An array-of-points is passed over this function. That array MUST be shared with remote users for collaboration.
designer.addSyncListener(function(data) {
designer.send(JSON.stringify(data));
});
setSelected
This method allows you select specific tools.
designer.setSelected('rectangle');
setTools
This method allows you choose between tools that should be displayed in the tools-panel.
designer.setTools({
line: true,
arrow: true,
pencil: true,
marker: true,
dragSingle: true,
dragMultiple: true,
eraser: true,
rectangle: true,
arc: true,
bezier: true,
quadratic: true,
text: true,
image: true,
pdf: true,
zoom: true,
lineWidth: true,
colorsPicker: true,
extraOptions: true,
code: true,
undo: true
});
icons
You can force/set your own tool-icons:
designer.icons = {
line: '/icons/line.png',
arrow: '/icons/arrow.png',
pencil: '/icons/pencil.png',
dragSingle: '/icons/dragSingle.png',
dragMultiple: '/icons/dragMultiple.png',
eraser: '/icons/eraser.png',
rectangle: '/icons/rectangle.png',
arc: '/icons/arc.png',
bezier: '/icons/bezier.png',
quadratic: '/icons/quadratic.png',
text: '/icons/text.png',
image: '/icons/image.png',
pdf: '/icons/pdf.png',
pdf_next: '/icons/pdf-next.png',
pdf_prev: '/icons/pdf-prev.png',
marker: '/icons/marker.png',
zoom: '/icons/zoom.png',
lineWidth: '/icons/lineWidth.png',
colorsPicker: '/icons/colorsPicker.png',
extraOptions: '/icons/extraOptions.png',
code: '/icons/code.png'
};
You can set like this as well:
designer.icons.line = '/icons/line.png';
Default values are NULL
to force icons from /dev/data-dris.js
.
appendTo
CanvasDesigner is a widget; that widget should be appended to a DOM object. This method allows you pass <body>
or any other HTMLDOMElement.
designer.appendTo(document.body || document.documentElement);
// or
designer.appendTo(document.body || document.documentElement, function() {
alert('iframe load callback');
});
The correct name for appendTo
is: append-iframe to target HTML-DOM-element
destroy
If you want to remove the widget from your HTMLDOMElement.
designer.destroy();
iframe
You can access designer iframe as following:
designer.iframe.style.border = '5px solid red';
window.open(designer.iframe.src);
designer.iframe
will be null/undefined
until you call appendTo
. So always use this code-block:
if(!designer.iframe) {
designer.appendTo(document.body);
}
designer.iframe.style.border = '5px solid red';
toDataURL
Get data-URL of your drawings!
designer.toDataURL('image/png', function(dataURL) {
window.open(dataURL);
});
sync
You can manually sync drawings by invoking designer.sync
method:
designer.sync();
Here is a real usecase:
webrtcDataChannel.onopen = function() {
if(designer.pointsLength > 0) {
// you seems having data to be synced with new user!
designer.sync();
}
};
captureStream
Get MediaStream
object and share in realtime using RTCPeerConnection.addStream
API.
<script src="dev/webrtc-handler.js"></script>
<script>
designer.captureStream(function(stream) {
var url = URL.createObjectURL(stream);
videoPreview.src = url;
rtcPeerConnection.addStream(stream);
rtcPeerConnection.createOffer(success, failure, params);
});
</script>
pointsLength
Each shape is considered as a point
. This value allows you check number of shapes that are already drawn on the canvas-designer.
(function looper() {
document.getElementById('number-of-shapes').inenrHTML = designer.pointsLength;
setTimeout(looper, 1000);
})();
Or a real usage:
websocket.onopen = function() {
if(designer.pointsLength > 0) {
// you seems having data to be synced with existing users!
designer.sync();
}
};
undo
You can either undo drawings by pressing ctrl+z
on windows and command+z
on Mac; however you can undo using designer.undo
method as well:
designer.undo(); // undo last shape
designer.undo(-1); // undo last shape
// undo shape from specific index
designer.undo(0);
// undo all shapes
designer.undo('all');
// undo last 10 shapes
designer.undo({
numberOfLastShapes: 10
})
designer.pointsLength
shows number of shapes; and designer.undo
accepts shape-index as well.
Open widget.html
and add your new tool-icon HTML.
<div id="tool-box" class="tool-box"> <!-- search for this div; and include your HTML inside this div -->
<canvas id="yourNewToolIcon" width="40" height="40"></canvas> <!-- here is your icon-HTML -->
</div>
Open decorator.js
and decorate your new HTML icon.
var tools = {
yourNewToolIcon: true // add this line to make sure index.html can use it
};
Search for decorateLine
method, and append following snippet quickly after that method:
function decorateYourNewToolIcon() {
var context = getContext('yourNewToolIcon');
context.fillStyle = 'Gray';
context.font = '9px Verdana';
context.fillText('New', 16, 12);
bindEvent(context, 'YourNewToolIconSelected');
}
if (tools.yourNewToolIcon === true) {
decorateYourNewToolIcon();
} else document.getElementById('yourNewToolIcon').style.display = 'none';
Open common.js
and add selection-states for your new tool-icon (i.e. whether your new tool icon is selected or not):
var is = {
isYourNewToolIconSelected: false, // add this line
set: function (shape) {
var cache = this;
cache.isYourNewToolIconSelected = false; // add this line as well.
// ..... don't modify anything else
cache['is' + shape] = true;
}
};
You merely need to set isYourNewToolIconSelected:true
also cache.isYourNewToolIconSelected=false
.
Create new file in the dev
directory. Name this file as yourNewToolIcon-handler.js
.
This file MUST look like this:
var yourNewToolIconHandler = {
ismousedown: false,
mousedown: function(e) {
this.ismousedown = true;
},
mouseup: function(e) {
this.ismousedown = false;
},
mousemove: function(e) {
if(this.ismousedown) { ... }
}
};
You can check other *-handler.js
from dev
directory to get the idea how exactly it works.
Now open Gruntfile.js#L43
and add link to your new file: dev/events-handler.js
.
Now compile all your changes using grunt
.
Open events-handler.js
and make sure that your above yourNewToolIconHandler
object is called for mouse up/down/move events.
addEvent(canvas, isTouch ? 'touchstart' : 'mousedown', function (e) {
// you merely need to add this line at the end of this method
else if (is.isYourNewToolIconSelected) yourNewToolIconHandler.mousedown(e);
});
addEvent(document, isTouch ? 'touchend' : 'mouseup', function (e) {
// you merely need to add this line at the end of this method
else if (is.isYourNewToolIconSelected) yourNewToolIconHandler.mouseup(e);
});
addEvent(canvas, isTouch ? 'touchmove' : 'mousemove', function (e) {
// you merely need to add this line at the end of this method
else if (is.isYourNewToolIconSelected) yourNewToolIconHandler.mousemove(e);
});
First of all, we are checking whether your tool-icon is selected or not: is.isYourNewToolIconSelected
Then we are calling yourNewToolIconHandler
dot mousedown/mouseup/mousemove
events respectively.
Open draw-helper.js
. Make sure that your new tool-icon can be drawn on the <canvas>
surface.
yourNewToolIcon: function(context, point, options) {
context.beginPath();
context.moveTo(point[0], point[1]);
context.whateverYouWantToDoHere(point[2], point[3]);
this.handleOptions(context, options);
}
Usually point[0]
is x
coordinates; point[1]
is y
coordinates; point[2]
is width
and point[3]
is height
.
Different shapes can handle these points differently.
There is NO-limit for point[index]
. You can add as many points as you want.
Complex shapes can add 10 or 20 points.
Open drag-helper.js
and make sure that your new shape can be dragged/resized/move.
Search for p[0] === 'line'
and add similar code-blocks for your shape (new-tool-icon) as well.
Open common.js
and make sure that your new shape (tool-icon) is printed on the <textarea>
as well.
This allows end-users to copy your shape's code and use anywhere on their own web-pages.
Open common.js
file; there is a function updateTextArea
inside the "common" object – which is aimed to output into textarea element.
You don't have to change updateTextArea
. For simplicity purpose, code is separated in different functions/properties that you've to edit:
Search for p[0] === 'line'
and add similar code-blocks for your shape (new-tool-icon) as well.
ctrl+t (to display text-fonts box)
ctrl+z (to undo last-single shape)
ctrl+a (to select all shapes)
ctrl+c (copy last-selected shape)
ctrl+v (paste last-copied shape)
ctrl+mousedown
allows you quickly copy/paste all shapes. (i.e. ctrl button + mouse down)
You need only these two files:
You also need to manually install socket.io
:
wget https://raw.githubusercontent.com/muaz-khan/RTCMultiConnection/master/server.js
wget https://raw.githubusercontent.com/muaz-khan/RTCMultiConnection/master/Signaling-Server.js
npm install socket.io --save-dev
node server --port=9002 --ssl --ssl_key=/home/ssl/ssl.key --ssl_cert=/home/ssl/ssl.crt
For more info:
Please make pull-request to update this list.
Canvas Designer is released under MIT licence . Copyright (c) Muaz Khan.
FAQs
Collaborative, extendable, JavaScript Canvas2D drawing tool, supporting dozens of builtin tools, as well as generates JavaScript code for 2D animations.
The npm package canvas-designer receives a total of 184 weekly downloads. As such, canvas-designer popularity was classified as not popular.
We found that canvas-designer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.