Cannot draw in very large canvas FireFox vs Chrome

Hi, I test your jcanvas and it was very interresting to use it, but in my case, I would use it in a very large canvas with zoom process. I redraw (.drawLayers()) a simple arc (radius 10) on the rigth side of a big canvas (when zoom process increase width canvas, x value of the layer too, but HTML page just see one part of the canvas). In this case, the issue beginnig appear on the rigth side because value are bigger. When I increase width, and when is like 17000px, redraw arc after x~= 16300, the circle disapear ! It’s look like jcanvas calculate some value are too big for redraw. $('#canvas').addLayer({ type: 'arc', name: 'name', fillStyle: 'yellow', strokeStyle: 'red', strokeWidth: 1, rounded: true, closed: true, x: (Here it increase at each step) , y: 100, radius: 5, draggable: true, drag: function (layer) { $('#canvas').setLayer('name', {x: layer.x+1}).drawLayers(); } }).drawLayers();

To see issue, I implemented drag on the Layer and move it pixel by pixel, See here the result before it totaly disapear :

Any idea to solve this issue ? Thanks a lot

[caleb531]

Thanks, @awenger63. I saw your pull request and will be reviewing it today. I will be closing this issue now, given everything you have said.

[caleb531]

@awenger63 Thank you for explaining what you are trying to achieve, because I believe you are going about it the wrong way. I would not recommend having a canvas so large. It will eats tons of memory and become unwieldy because you have so many pixels to work with. The canvas should never be any larger than the user’s viewport (window).

I say this with confidence because I have struggled with a similar design issue in the past for my Grapher application. I am rendering mathematical equations on a graph which is virtually infinite in size, and I want the user to be able to examine the graph at any point in this infinite space.

When I first wrote the app, the canvas size was over 4000 pixels in width and height, with the canvas container clipped to hide most of it within a 480x480 space. However, having a canvas this large proved to be enormous and slow. I later redesigned the app to have the canvas be the size of the container (only 480x480), using canvas translate to pan around as the user desired.

Take a look at: https://projects.calebevans.me/jcanvas/docs/translateCanvas/#layers https://projects.calebevans.me/jcanvas/docs/scaleCanvas/#layers

Also remember that you can draw shapes on the canvas that at x=16000px, even if the canvas isn’t that wide. They won’t be visible initially, but if you translate the canvas with a method like translateCanvas(), you’ll be able to see them.

I’ve written up an example below of how to pan the entire canvas by clicking and dragging anywhere. You can test it in the jCanvas Sandbox. I’ve hidden some shapes to the left and to the right, which you can only see by clicking and dragging the canvas.

var $canvas = $('canvas');

// Initial variables
var panX = 0
var panY = 0;
var startX;
var startY;
var isPanning;

// Create a layer for panning the canvas
$canvas.translateCanvas({
  layer: true,
  name: 'pan'
});

// Draw some random shapes
$canvas.drawPolygon({
  layer: true,
  fillStyle: '#36c',
  x: -100, y: 200,
  radius: 50,
  sides: 3
});
$canvas.drawArc({
  layer: true,
  fillStyle: '#6c3',
  x: 150, y: 140,
  radius: 50
});
$canvas.drawRect({
  layer: true,
  fillStyle: '#c33',
  x: 400, y: 100,
  width: 100, height: 100
});

// This is essential for restoring translate on each draw
$canvas.restoreCanvas({
  layer: true,
  name: 'restore'
});

// Add panning behavior to canvas
$canvas.on('mousedown', function (event) {
  startX = event.offsetX - panX;
  startY = event.offsetY - panY;
  isPanning = true;
});
$canvas.on('mousemove', function (event) {
  if (isPanning) {
    panX = event.offsetX - startX;
    panY = event.offsetY - startY;
    console.log(panX);
    console.log(panY);
    $canvas.setLayer('pan', {
      translateX: panX,
      translateY: panY
    });
    $canvas.drawLayers();
  }
});
$canvas.on('mouseup', function (event) {
  isPanning = false;
});