Creating an endless canvas grid in Fabric.js similar to Miro's interface

Other Questions Miro
1

Hi everyone! I’m working on a drawing app using Fabric.js and I’m stuck on how to make a never-ending grid background that works like Miro’s. Here’s what I want to do:

  1. Make the grid change size when you zoom in or out
  2. Have the grid move when you pan around
  3. Get the grid to fit the canvas when you change the browser size

I’ve looked online but haven’t found anything that does all these things and works smoothly. Has anyone done this before? Any tips or tricks would be super helpful!

Here’s a basic example of what I’ve tried so far:

const canvas = new fabric.Canvas('myCanvas');
const gridSize = 20;

function drawGrid() {
  const width = canvas.width;
  const height = canvas.height;

  for (let x = 0; x < width; x += gridSize) {
    canvas.add(new fabric.Line([x, 0, x, height], {
      stroke: '#ccc',
      selectable: false
    }));
  }

  for (let y = 0; y < height; y += gridSize) {
    canvas.add(new fabric.Line([0, y, width, y], {
      stroke: '#ccc',
      selectable: false
    }));
  }
}

drawGrid();

This draws a basic grid, but it doesn’t zoom or pan. Any ideas on how to improve this? Thanks a bunch!

2

hey man, i’ve been workin on smthin similar. instead of drawin the whole grid, try rendering only the visible part. use canvas.viewportTransform to calculate which lines to draw. for zoom, adjust line thickness based on zoom level. for panning, update grid position with canvas.on(‘mouse:move’). hope this helps!