HTMLGraph logo HTMLGraph
Star

Background

To enable built-in background rendering, call the enableBackground method on CanvasBuilder.

    
const element = document.getElementById('canvas');

const canvas = new CanvasBuilder(element)
  .enableBackground()
  .build();
Built-in background rendering

This method accepts optional configuration:

    
const element = document.getElementById('canvas');

const canvas = new CanvasBuilder(element)
  .enableBackground({
    tileDimensions: {
      width: 50,
      height: 50,
    },
    renderer: {
      radius: 5,
      color: 'var(--color-background)',
    },
    maxViewportScale: 20
  })
  .build();

Configuration Parameters

NameTypeDescriptionRequiredDefault
tileDimensionsTileDimensionsDimensions of rendered tileno{ width: 25, height: 25 }
rendererRendererSpecifies the content of tileno{ radius: 1.5, color: '#d8d8d8' }
maxViewportScalenumberViewport scale threshold when background should not be renderedno10

TileDimensions

NameTypeDescriptionRequiredDefault
widthnumberTile widthno25
heightnumberTile heightno25

Renderer

Can be either built-in circle:

const renderer = { radius: 5, color: 'red' };

or SVGElement:

const renderer = document.createElementNS('http://www.w3.org/2000/svg', 'path');
// Drawing cross in SVG
renderer.setAttribute('d', 'M -5 0 L 5 0 M 0 5 L 0 -5');
renderer.setAttribute('stroke-width', '1');
renderer.setAttribute('stroke', '#CCCCFF');

Custom background renderer