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

Webmentions

  • sans ordonnance kamagra sans ordonnance comprime l alcool

    kamagra soft

    kamagra prescrire eu medicament pharmacie

  • kamagra není nutný předpis

    nízká cena kamagra bez lékařského předpisu

    koupit kamagra z usa lékárny bez lékařského předpisu

  • buying itraconazole generic from the uk

    get itraconazole price south africa

    discount itraconazole generic drug

  • order fildena australia generic online

    how to order fildena ireland over the counter

    online order fildena price generic

  • get gabapentin buy san francisco

    gabapentin en ligne

    acheter du gabapentin en pharmacie sans ordonnance

  • buying flexeril cyclobenzaprine cheap pharmacy

    cheapest buy flexeril cyclobenzaprine no prescription overnight delivery

    online order flexeril cyclobenzaprine cheap generic uk

  • get dutasteride generic uk next day delivery

    purchase dutasteride cheap in canada

    cheapest buy dutasteride generic drug

  • cheapest buy avodart generic germany

    order avodart canada fast shipping

    discount avodart generic overnight shipping

  • how to buy staxyn buy japan

    non prescription staxyn

    get staxyn generic canada

  • cheapest buy xifaxan price usa

    cheap xifaxan generic canadian

    order xifaxan uk buy cheap

  • discount rifaximin purchase singapore

    buy rifaximin australia discount

    purchase rifaximin price by pharmacy

  • how to buy enclomiphene canadian pharmacy no prescription

    buying enclomiphene canada price

    purchase enclomiphene buy for cheap

  • buy cheap androxal cheap in uk

    androxal cod overnight delivery

    cheap androxal without a rx