CODEWITHSUNDEEP
paperjs
scriptin
scriptin

Reputation: 3120

Resizing paper.js canvas programmatically: not properly redrawing part of canvas beyond original size

Example: https://jsfiddle.net/gnxdkqgh/5/

  1. Try clicking on x0.5 - everything works as expected
  2. Try clicking on x2 - part of the canvas that is beyond original rectangle is not redrawing properly
  3. Try clicking on x2 in rapid succession - you can see it draws animated dashed line, but fails to "clear" the canvas. It just draws over existing dashes, resulting in solid line.

Is it a bug in Paper.js or am I doing something wrong?

I'm using latest Chrome. Here's a screenshot if you can't reproduce a problem:

paper.js canvas resizing bug

Upvotes: 0

Views: 3636

Answers (1)

bmacnaughton
bmacnaughton

Reputation: 5308

The problem is that you're changing the size of the canvas without letting paper know that is what you've done. Rather than setting canvas size in your resize function, set paper.view.viewSize which will also reset the canvas size.

In the resize function replace canvas.width = w; canvas.height = h; with paper.view.viewSize.width = w; paper.view.viewSize.height = h;

This will cause paper to change both the view size and the underlying canvas size - see paperjs.org viewSize doc

Upvotes: 7

Related Questions