0

I created a huge canvas on and rendered a lot of objects on the canvas using FabricJS . It seems to work fine on chrome . However when I do the same on Mozilla FireFox no objects appear on the screen. Upon inspecting the elements using the dev tools I see that the objects have been rendered on the lower canvas but no objects appear on the screen.

JS Fiddle - https://jsfiddle.net/abhroy/pf1LxyaL/

Try the fiddle on chrome and FireFox and change the canvas size to 6000 by 6000 using JS the objects are rendered on chrome but not on firefox. I wanted to know the reason for this and what is the solution to rendering the objects on FF given a large canvas size. It would be better if you try out the above code on new browser tabs instead of jsfiddle and inspecting the elements. I know using large canvases is not preferable but I was trying out a specific case .

Abhijit Roy
  • 39
  • 5
  • I Firefox I keep getting NS Error failure on large canvas (https://stackoverflow.com/questions/12642222/canvascontext-fillrect-throws-ns-error-failure-exception-in-firefox) & (https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element) – Abhijit Roy Jun 13 '18 at 05:50

1 Answers1

0

While initalizing canvas set width and height. Here is jsfiddle

DEMO 

function init() {
  var count = 0;
  canvas = new fabric.Canvas('c', {
    width: 1300,
    height: 1000
  });
  var rect = new fabric.Rect({
    left: 50,
    top: 50,
    fill: "red",
    width: 100,
    height: 100,
  });
  canvas.add(rect);
}
init();
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.0/fabric.js"></script>
<body>
<div class="canvas-div">
 <canvas id="c" style="border:1px solid black"></canvas>
</div>
Durga
  • 15,263
  • 2
  • 28
  • 52
  • It does not work for Width : 6000 and Height : 6000. JS Fiddle - https://jsfiddle.net/pf1LxyaL/3/ . If you inspect the canvas using dev tools on firefox and hover on the lower-canvas canvas element you will see a small popup showing that the object has been drawn but the object doesnt appear on screen . Also if you hover over the position where the object was supposed to be drawn the pointer changes to a drag pointer showing that the object exists but it is not shown. – Abhijit Roy May 29 '18 at 12:52