paperjs / paper.js

The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey
http://paperjs.org
Other
14.45k stars 1.22k forks source link

Drawing an image with a width or height of 0 breaks paper.js #1320

Closed cs-NET closed 5 years ago

cs-NET commented 7 years ago

The obvious question is why are you trying to draw something with a width of zero? Well, it happens!

As a workaround, we extended the if (element) to also check for a valid width and height.

_draw: function(ctx) {
    var element = this.getElement();
    if (element && element.width > 0 && element.height > 0) { 
        ctx.globalAlpha = this._opacity;
        ctx.drawImage(element,
                -this._size.width / 2, -this._size.height / 2);
    }
},

The main issue is that once thrown it prevents all future updates to the canvas across all paper.js projects. Here is the exception to help others looking for a solution:

InvalidStateError: DOM Exception 11: An attempt was made to use an object that is not, or is no longer, usable.

lehni commented 7 years ago

Could you provide code, e.g. on http://sketch.paperjs.org, to reproduce the error? And which version of the library are you encountering this with? Most importantly, could you provide such a file?

cs-NET commented 7 years ago

@lehni sorry it took so long to get to this. It took me a while but here is some code that will cause the exception on FireFox and Safari. Chrome will ignore it.

var path = new Path.Circle(100,100, 10);
path.fillColor = '#0000FF';
path.removeSegments();
path.add(new Point(100, 100));
path.add(new Point(101, 100));
path.smooth();
path.rasterize();

http://sketch.paperjs.org/#S/dY9PC8IwDMW/SqmHdTBGd514Guws7Kge6hZdWduMtExQ/O624h8QDASSvPd+kBt3ygKveTdB6Ede8B6HtC+K2KzCyDbMwYVt41g2mnoDopKySM0qma/3LrnKkzamQYMU/dlKxmrb7C0SWFygg7MFF7z4hNQwiCcctQvihZT5X7360b1FDOOXR8oHIH2FeIqfHAnUNKes5/XucH8A