DrawerJS unofficial documentation

In case you have bought https://www.drawerjs.com/ license, you might be wondering how to do couple special, yet very often needed, tricks that are not covered in documentation.

add new Text object into canvas

For example, in the documentation you’ll find how to add an image through code – https://www.drawerjs.com/try-standalone-api

drawer.api.setBackgroundImageByUrl(url)

But how to add a Text object and place it into canvas? You won’t find that in the official docs..
In order to do that, you need to create fabric.IText object, add default styling and place it into canvas. You can find complete example below.

On last 2 lines I’ve also changed the text – you can change any style, or position value like this.

// This is default Drawer initialization, 
// as can be found in documentation
var canvas = new DrawerJs.Drawer(null, {
    // I recommend to keep this at 'false', 
    // latest version of DrawerJS has a bug related to this
    exitOnOutsideClick: false,
    backgroundCss: 'transparent',
    // you can load as many plugins as you want, 
    // this for this example, we will only need 'Text'
    plugins: [ 'Text' ],
    pluginsConfig: {
        Text: {
            fonts: {
                'Arial': 'Arial, Helvetica, sans-serif',
            },
            defaultFont: 'Arial'
        }
    },
    basePath: '/',
    transparentBackground: true,
    align: 'center' // equivalent of margin: 0 auto
}, 582, 414);

$(document).ready(function () {
    $('#canvas-editor').append(canvas.getHtml());
    canvas.onInsert();
    canvas.api.startEditing();

    // Custom code - this is what you're looking for!
    var t = new fabric.IText('Lorem Ipsum');
    t.top = 50;
    t.left = 50;
    // be sure to pick font family defined in pluginsConfig->Text
    t.fontFamily = 'Arial, Helvetica, sans-serif';
    t.fontSize = 15;
    t.fill = '#000';
    t.fillRule = 'nonzero';
    t.fontWeight = 'normal';
    t.editable = true;
    canvas.fCanvas.add(t);
    // you can omit next line - it just highlights the newly 
    // added object and allows user to change the text right away 
    canvas.fCanvas.setActiveObject(t);

    // And this is how you can change anything 
    // later on - on 'click' event for example
    t.text = 'Different Text';
    canvas.fCanvas.renderAll();
});

Fire event after your changes have been rendered into canvas

Lets say you want to change background through code – you look at their documentation and find out this is the way to do it

drawer.api.setBackgroundImageByUrl(url)

but – if you use bigger image, it may take a while, 2-3 seconds to render. If you save the image before that, you end up with base64 without the new image.
Events are not covered in their documentation at all, so this is the trick:

// add event listener first
canvas.fCanvas.on('after:render', function(){ 
    console.log('Done, we can export the image now'); 
});

// make changes to canvas.. 
drawer.api.setBackgroundImageByUrl(url)

Remove focus – unhighlight object

If you are exporting image you don’t want the default blue border around highlighted object

if(temp = canvas.api.getSelectedObject()){
    temp.active = false;
}
canvas.fCanvas.renderAll();

Export canvas into base64

var base64Output = canvas.api.getCanvasAsImage();

.. and you can send this through $.post() to backend

Resize canvas and all DrawerJS objects in it

// Set up same base ground ..
var canvas = new DrawerJs.Drawer(null, {
    // I recommend to keep this at 'false', 
    // latest version of DrawerJS has a bug related to this
    exitOnOutsideClick: false,
    backgroundCss: 'transparent',
    // you can load as many plugins as you want, 
    // this for this example, we will only need 'Text'
    plugins: [ 'Text' ],
    pluginsConfig: {
        Text: {
            fonts: {
                'Arial': 'Arial, Helvetica, sans-serif',
            },
            defaultFont: 'Arial'
        }
    },
    basePath: '/',
    transparentBackground: true,
    align: 'center' // equivalent of margin: 0 auto
}, 500, 500);
// do what you have to do..
// ..
// now you want to resize everything?


// set up new canvas size - note that we are going to use
// canvas twice the original size, therefore we will
// need to resize all objects to twice their size
canvas.setSize(1000, 1000);
// check if there are any objects inserted 
// this could be text, images, lines, rectangles, triangles, pencil objects etc..
if(canvas.fCanvas._objects.length > 0) {
    // there are some, loop through them
    for (var i = 0; i < canvas.fCanvas._objects.length; i++) {
        var o = canvas.fCanvas._objects[i];
        o.setScaleX(o.scaleX * 2); // twice the original size
        o.setScaleY(o.scaleY * 2);
        o.setTop(o.top * 2);
        o.setLeft(o.left * 2);
    }
    // render our changes
    canvas.fCanvas._objects[0].canvas.renderAll();
}

How to center and scale image when adding it through API

You can use addImageFromUrl like this:

canvas.api.addImageFromUrl('/1.png', {'centerImage': true, 'scaleX': 2, 'scaleY': 2});

This is just an example, you can use any other parameter - left, top, width, height, rotate, etc..

How to load older canvas when needed ( e.g. when going back in form )

The official documentation is buggy and will end in Uncaught ReferenceError: serializedCanvas is not defined(…)

Best way to get around it, is to use these 2 functions appropriately:
1st/ store canvas data when needed ( e.g. when you are navigating away from this page )

localStorage.setItem('ourdata', JSON.stringify(canvas.getCanvasData()));

2nd/ then you can bring it up next time you go back to that page by placing canvas.loadCanvas(localStorage.getItem('ourdata')); after append. See example:

$(document).ready(function () {
     $('#canvas-editor').append(canvas.getHtml());
    canvas.onInsert();
    canvas.api.startEditing();
    canvas.loadCanvas(localStorage.getItem('ourdata'));
});

Uncaught TypeError: Cannot read property 'find' of null(…)

If you are using backgroundImage plugin, make sure you use

exitOnOutsideClick: false

You can have it automatically turned on like this

$(document).ready(function () {
    $('#canvas-editor').append(canvas.getHtml());
    canvas.onInsert();
    canvas.api.startEditing();

.. and just keep it that way.

Change default drag&drop border color in canvas

canvas.fCanvas.on('after:render', function(){ 
    if(canvas.fCanvas._objects.length > 0){
        for(var i = 0, len = canvas.fCanvas._objects.length; i < len; i+=1){
            canvas.fCanvas._objects[i].borderColor = 'rgba(251,182,74,1)';
            canvas.fCanvas._objects[i].cornerColor = 'rgba(251,182,74,1)';
        }
    }
});

Where 255,181,74 is your new rgb color. Be sure to place this after $('#canvas-editor').append(canvas.getHtml());

Write a Comment

Comment