Hi

I am using this library on my website but I have some problem related to text field.

Firstly I wanted to have the text have a fixed width. Can you please let me know how to do that?

Secondly the text alignments button doesn't seem to be working. So I entered 7-8 lines of text in text element and then clicked justify but nothing happened. Please help with this.

Thanks

Is there an already developed way to detect events as they happen with each shape. For example, if a shape is clicked or pressed? And then be able to implement an event handler?

Thanks for the promising tool! I'm trying to integrate it into a page that is served at mydomain.com/articles/new while the js is served from /assets/drawerJs/dist/drawerJs.standalone.min.js etc.

First I ran into trouble because of this, which was "solved" by moving everything into a dist folder, but now I'm stuck because of this...

So instead I think it would be good to have a baseUrl (or similar) config option which I could set to /assets/drawerJs/dist/.

We are opening whiteboard when a user clicks on a link available in our web application. As of now, the experience is, the user has to click on the link available on our web page. This will take the user to the page where we have implemented whiteboard. But again here the user has to click on the image window("Click here to start") to interact with the whiteboard. This takes 2 user interaction(click on the link in our web application and click on whiteboard image). We would like the user to click only on the link available in our web application and then need to render whiteboard without any further clicking. is this possible?

If the plugin BackgroundImage is initialised with fixedBackgroundUrl image is not stretched until you resize the canvas manually from the resize control.

              'BackgroundImage': {
                    imagePosition: 'stretch',
                    fixedBackgroundUrl: imgSrc,
                },

If you create a background image from the api the stretch property is respected.

        drawer.api.startEditing();
        drawer.api.setBackgroundImageFromUrl(imgSrc, {imagePosition: 'stretch'});

But if you click outside the canvas and than back on the canvas the image is no longer stretched.

Using the API example, it doesn't allow the pen from a touch device to draw, only a mouse. Am I missing a config setting or is it designed this way

I read that v2.x of FabricJS had some breaking changes and I believe that this directly affects DrawerJS. I didn't find any mention of breaking changes with version 3.x of FabricJS. Has there been any consideration of fixing DrawerJS to work with v2.x or v3.x of FabricJS? Any recommendations on where to start?

The functionality that I believe a new version of FabricJS fixes include:

1. The ability to load a canvas that has an embedded image
2. The ability to apply a superscript to a font
3. The ability to select multiple objects/shapes at a time

How we can provide GridLine over in Drawer JS library!

I am trying to provide the GridLine (vertical & horizontal lines) feature over canvas while initializing the Drawer JS, but not found any solution.

Can someone please suggest is there have any functionality to provide the GridLines using Drawer JS ?

Hi All,
I am saving the drawn item to local storage and rendering the canvas of the html page when the page is reloaded.
`
saveDrawing () {
var serializedData = window.drawer.api.getCanvasAsJSON();
var res = JSON.stringify(serializedData)
if (res) localStorage.setItem('canvas', res)
},

 loadDrawing () {
    var parseData = JSON.parse(localStorage.getItem('canvas'))
   window.drawer.api.loadCanvasFromData(parseData)
 }

`
I get the exceptions saying
TypeError: Cannot read property 'loadFromJSON' of undefined
at DrawerConstructor.Drawer.loadCanvas (drawerJs.standalone.js:29762)
at DrawerApi.loadCanvasFromData (drawerJs.standalone.js:27517)
at VueComponent.loadDrawing (DrawTool.vue?fd05:304)
at VueComponent.mounted (DrawTool.vue?fd05:248)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at callHook (vue.runtime.esm.js?2b0e:4213)
at Object.insert (vue.runtime.esm.js?2b0e:3139)
at invokeInsertHook (vue.runtime.esm.js?2b0e:6340)
at Vue.patch [as patch] (vue.runtime.esm.js?2b0e:6559)
at Vue._update (vue.runtime.esm.js?2b0e:3939)

How to fix this?

Hi All, I am new to this tool. I wish to add it in my vue web page.
I tried the following to implement it but it throws issue like this.
ReferenceError: DrawerJs is not defined
How to fix this?

import drawerLocalization from './DrawerLocalization'
import drawerJsConfig from './redactorConfig'
import DrawerJs from './Drawer'

var drawer = new DrawerJs.Drawer(null, {
texts: drawerLocalization,
plugins: drawerJsConfig,
defaultImageUrl: '/images/drawer.jpg',
defaultActivePlugin : { name : 'Pencil', mode : 'lastUsed'},
}, 600, 600);
$('#canvas-editor').append(drawer.getHtml());
drawer.onInsert();
})

As i have read the DOcs. I can see there is a Close Button to close current DrawerJs instance,
But how can i close current DrawerJs instance through JS Code ?

Hi, DrawerJs is great to embed and use. I was wondering if there were attempts to implement single vertex editing once a polygon was closed? If not, what would be the way to go about that?

Do you plan to migrate your library from grunt + bower to webpack, yarn ?

i want to use it in component. but canvas creating in the end of html document, not in component.
How i can move canvas in some container?

Hey

Is there a way to move or delete a line which was drawn with the pencil-tool?

Switching to pencil / eraser and using them creates non-stop requests for the pencil / eraser icon if those are not at the default location even if basePath is set properly.

I think that those lines:

if (_this.options.cursorUrl == 'eraser') {
      var drawerFolderUrl = window.location.href;

if (_this.options.cursorUrl == 'pencil') {
      var drawerFolderUrl = window.location.href;

should be changed to

if (_this.options.cursorUrl == '...') {
      var drawerFolderUrl = util.getDrawerFolderUrl();

Sorry, I don't not really know how to create pull request.

Hello：
I want to get changes to the canvas content through these two events for “EVENT_CANVAS_MODIFIED” and “EVENT_OBJECT_ADDED”. Into an infinite loop when sending websocket messages。I want to listen to changes in content and send data to the backend。what should I do ? thanks

Drawing vertical line doesn't work if degree value is between 90 - 88

Hi guys!
The function [getTemporaryCanvas] of [Util.js] have a incorrect value asignment: "canvasHeight = originalCanvas.width" <-- here is
This generates a crop to a square of [width x width] in the render when height of canvas is grather than width.
Sorry for my English; See you!

Hi,
Please fix the eraser.
it restores erased content back when mouse button released.
Tnx.

In some explorer won't show the file selection dialog，because in the "_showDialog" function，the element input should putinto the document node，here is the original code:
ImageTool.prototype._showDialog = function() {
var acceptedMIMEStr = this.options.acceptedMIMETypes.join(',');
var $el = $('');
$el.on('change', this._processFileInput.bind(this));
$el.click();
};
and the below one will work:

ImageTool.prototype._showDialog = function() {
var acceptedMIMEStr = this.options.acceptedMIMETypes.join(',');
var $el = $('');
$el.on('change', this._processFileInput.bind(this));
$(document.body).append($el);
$el.click();
$(document.body).remove($el);
};

and also the BackgroundImageTool plugin in the "BackgroundImageTool.prototype._showDialog" function should modify as above。

I would like to know if we can perform some edit operation on an Image inserted on DrawerJS Layout Editor.

Is there a guide on how to create custom plugins?

Hi,

I have removed the file input dialog and replaced it with a default Image using the Image Insert Plugin.
I want to allow user to change Image again after setting the default Image icon. Please let me know if this is possible WRT DrawerJS

Hello , firstly thank you for this good library.

I am trying to record canvas actions as video when users drawing on canvas.
Everything is fine but only onething I need to fix. and I dont know how can I fix this. I couldnt find anything about this in your documentation :(

The problem about Freehand drawing pencil, I need to update canvas path value every single mouse move. Because DrawerJs is updating canvas when mouseUp and canvas recorder cant catch the mousemove actions.I was try to change _onMouseMoveInDrawingMode function , it works but its not a good solution. Because something is wrong and I cant control cursor on canvas because its being so slowly and difficult to draw anything.

Here is my code from drawerJs.standalone.js

_onMouseMoveInDrawingMode: function(e) {

        if (this._isCurrentlyDrawing) {
        var pointer = this.getPointer(e);
        this.freeDrawingBrush.onMouseMove(pointer);
        //  I added this region for set path values from every single mouse move
        if (this.clipTo) {
            this.contextTop.restore();
        }
        this.freeDrawingBrush.onMouseUp();
        // end
        
      }
      this.setCursor(this.freeDrawingCursor);
      this._handleEvent(e, 'move');
    },

    /**
     * @private
     * @param {Event} e Event object fired on mouseup
     */
    _onMouseUpInDrawingMode: function (e) {
      this._isCurrentlyDrawing = false;
      if (this.clipTo) {
        this.contextTop.restore();
      }
      //this.freeDrawingBrush.onMouseUp();  
      this._handleEvent(e, 'up');
    } 

I hope you can help me for fix this problem.
Thank you.
Best regards

I tried to put a drawerjs inside bootstrap modal using the following code:

        $("#mymodal").modal('show');
        var drawer = new DrawerJs.Drawer(null, {
            plugins: ['Pencil'],
            defaultActivePlugin : { name : 'Pencil', mode : 'lastUsed'},
        }, 300, 300);
        $('#drawer-modal .modal-body').append(drawer.getHtml());
        drawer.onInsert();

The canvas would appear initially but once clicked the toolbars won't appear and nothing works.

I tried also the featherlight lightbox:

        $.featherlight('.container', {
            closeOnClick: false,
            afterContent: function (event) {
                var drawer = new DrawerJs.Drawer(null, {
                    plugins: ['Pencil'],
                    defaultActivePlugin : { name : 'Pencil', mode : 'lastUsed'},
                }, 300, 300);
                $('.featherlight-inner').append(drawer.getHtml());
                drawer.onInsert();                
            }
        });

And this time upon clicking the canvas the toolbars appear but I can't draw anything.

Anything that can be done to make any of those work or it is not supposed to be used like that?

Sorry couldn't make a JS fiddle because there was no DrawerJS CDN I could find.

Method loadImageFromUrl creates image without taking into consideration if there was a crossOrigin setting in the options. As the result one will get a security error later if use an image from a different origin.

Proposed solution:

if (options.crossOrigin) { image.crossOrigin = options.crossOrigin; }

after onload set.

I am saving canvas data and reloading it via the loadCanvasFromData method. That works fine, however if the canvas size that I am loading to differs from the canvas size that the drawing was created on, then the sizing and position of the objects are incorrect. I think this is because the canvas data saves exact position instead of a relative measure (such as percentage). Is there a solution for this issue?

{ "type": "PRect", "originX": "left", "originY": "top", "left": 765, "top": 714, "width": 519, "height": 184,

It seems the issue also happens in the 3 demo pages. haven't checked other branches but on master branch it doesn't work no matter what the settings are

This seems to be the same problem.
https://stackoverflow.com/questions/65592127/drawerjs-fixedbackgroundimage-is-not-able-to-fit-the-image-iside-canvas

We have imported the Canvas contents to JSON but I would like to know that is it possible to do the reverse way,i.e. to Load the Canvas contents by passing the JSON data.
Please refer the attached JSON fiel data for the same.Also note that I have extended the existing JSON object model to support "typeId" parameter

Regards,
Vinayak
LayoutEditor_20201023_021817.txt

Have uploaded files in a folder on server of my provider.
Added a Basepath.
everything is working like a charm except INSERT AN IMAGE and INSERT A BACKGROUND IMAGE.
Does anyone have had the same issue and can give a hint how to fix it?

Just wondering how can i set a background solid color.
I want this feature on initialize and also after initializing the user can pick from a predefined list of colors.

I'm using a CentOS 6.9 / Firefox 52.5.1 and the drawing performance is not very good. When I'm using the free drawing mode there's a lot of latency between my pointer movement and the appearance of the line.

I've noticed that if the canvas is small like 200x200 pixels the latency is almost gone. But if create a bigger canvas like 1280x720 pixels the latency can reach almost a second! The bigger the canvas the bigger the latency.

No such problem on Windows 10 / Firefox and MacOS High Sierra / Firefox or Safari. I've tested with the provided example: https://carstenschaefer.github.io/DrawerJs/examples/fullscreen/.

Not sure if the issue is something platform specific to Linux Firefox or the issue is with DrawerJs.

BTW excellent work! Thanks.

I've downloaded all of the required files and make a project based on the standalone example. Everything is just fine but the image-upload function on google chrome, its working fine on edge.

When i look on my debug console it says:
[TOOL] [BackgroundImage] .activateTool() [BaseTool]
Drawer.js:630 [TOOL] [BackgroundImage] : deactivateTool [BaseTool]

It should open an "upload' window but it didnt.

can somebody help me?

I have a canvas that requires, the person to draw a rectangle multiple times. Each time the person has to re-select the Rectangle Shape from the toolbar. Is there a way to keep using the Rectangle tool after creating a single instance ?

For default config, I have this

defaultActivePlugin: {
		name: 'Rectangle',
		mode: 'lastUsed'
	}

but this is for init only.

Add any shape, set fill color to transparent, It is not setting the transparent but instead it setting the black color

jquery.js:3869
Uncaught TypeError: Cannot read property 'Add Drawer' of undefined
at init.t (drawerJs.redactor.js:26512)
at init (drawerJs.redactor.js:26428)
at init.eval (eval at (redactor.min.js:12), :1:25040)
at String.proxy (jquery.js:496)
at Function.each (jquery.js:362)
at init.plugins (eval at (redactor.min.js:12), :1:24684)
at init.callEditor (eval at (redactor.min.js:12), :1:21742)
at init.setCodeAndCall (eval at (redactor.min.js:12), :1:21401)
at init.run (eval at (redactor.min.js:12), :1:20171)
at new init (eval at (redactor.min.js:12), :1:7354)

Redactor 10.2.5 as widget for yii2 (link)
JQuery v3.2.1 and jQuery Migrate v1.4.1

Please check demo in IE11. Increase size, then try to draw. It won't change size.

When launching "npm start" I get this on linux pc.
Warning: Command failed: Chrome "http://localhost:8081/examples"
/bin/sh: 1: Chrome: not found
Use --force to continue.
Aborted due to warnings.

I changed Chrome to google-chrome in Gruntfile.js and it started.

Hope it helps others with same problem.

how can solve this problem?

drawerJs.standalone.min.js:5 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
at i.drawCacheOnCanvas (https://localhost:44351/js/drawerJs/drawerJs.standalone.min.js:5:117945)

Event if i set the colors in the options, it has no effect
It means, i cannot change the default color list, or add some new color to the default 66 colors ....

How to change mouse pointer icon for Text Box in DrawerJs Canvas. Suppose when I clicked on Text Box to write text so default mouse pointer is + icon but requirement to replace with Pencil Icon.