0

I have a problem using fabric.js in canvas. After resize with scale factor at 5x, clicking in ZoomIn 2 times, the elements on the canvas disappear. Please look: http://jsfiddle.net/ptCoder/Q3TMA/90/

Canvas size (just for example):

<canvas id="c" width="400" height="400"></canvas>

Zoom Scale Factor:

var SCALE_FACTOR = 5;

Is there any solution?

Thank You.

ptCoder
  • 2,229
  • 3
  • 24
  • 38

1 Answers1

1

The problem is that you are also resizing the canvas, so after zooming 2 times, its size is 10000px * 10000px, meaning 100 megapixels, and several hundred megabytes of memory required.

If you keep the canvas size constant (like this), or limit it to a value small enough, zooming works as expected.

To keep the size constant you just have to remove these two lines:

canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);
ValarDohaeris
  • 6,064
  • 5
  • 31
  • 43
  • @ptCoder: Exactly, your elements are not gone! After 2x zoom-in, they're just off-canvas down and to the right. Notice the scrollbars that appear after zooming. Just scroll down and right and your elements are still there. – markE Apr 24 '13 at 20:46
  • Thank you for your reply. But I need to large canvas to convert canvas to, for example, 300 or 600 DPI. I need a large canvas size. Is there any solution? – ptCoder Apr 24 '13 at 20:46
  • @markE, What is the browser that you are using? One new example with a canvas with 10000x10000 pixels. You click in ZoomIn 6/7 times and canvas desapear completly. Please check this: http://jsfiddle.net/ptCoder/Q3TMA/95/ – ptCoder Apr 24 '13 at 20:50
  • 1
    Yes, so it probably depends on your browser/system what happens with a 10000x10000 canvas. I don't know what exactly you are trying to achieve, but I am almost certain that it is possible without creating such a giant canvas... – ValarDohaeris Apr 24 '13 at 20:58
  • 2
    IE10 clicking Zoom-in 3X works fine. The 4th Zoom-in does cause your disappearing (probably exceeding browser capability). But 3X gets you from 72 dpi to 72*2*2*2=576 dpi if rescaled. – markE Apr 24 '13 at 21:06
  • Is there another option that I have to create images from canvas at 300/600 DPI? I think that I need to create a large canvas. But I have this problem :( – ptCoder Apr 24 '13 at 21:08
  • Using Node.js is a possible solution? – ptCoder Apr 24 '13 at 22:02