Class CanvasBG<Config>

constructor

• new CanvasBG<Config>(canvas?, config?): CanvasBG<Config>

• Type Parameters

  • Config = Record<string, unknown>

  Parameters

  • Optional canvas: CanvasSelector

    The canvas element, selector, or ChildCanvasBG.
  • Optional config: Config

    Optional configuration options.

  Returns CanvasBG<Config>

  Example

  // Create a CanvasBG instance with a canvas element
  const canvasBG = new CanvasBG(document.getElementById('myCanvas'));
  
  // Create a CanvasBG instance with a canvas selector
  const canvasBG = new CanvasBG('#myCanvas');
  
  // Create a CanvasBG instance with another CanvasBG instance
  const mainCanvas = new CanvasBG();
  const childCanvasBG = new CanvasBG(mainCanvas);
  Copy

  Remarks

  If you are extending the CanvasBG class with a subclass, make sure to call the superclass constructor using super() within the constructor of the subclass.

Readonly defaultAlias

layers

• get layers(): Record<string, Layer>

• Gets the layers associated with the current CanvasBG instance. The layers are stored as key-value pairs, where the key is the layer name and the value is the associated CanvasBG instance. the __main key is reserved for the main CanvasBG instance. zIndex is used to sort the layers.

  Returns Record<string, Layer>

  Example

  const bg = new CanvasBG(".bg-canvas")
  .use(new StarField(null, { speed: { x: 0, y: 0, z: 0.001 }, points: 150 }))
  .use(new MouseTracker(), { as: "mousetracker", zIndex:100}) // associate with a key
  .use(new Constellation()); // associate without a key (default key is the class name)
  console.log(bg.layers.__main === bg); // true
  Copy

  layers is always points same address on all siblings

  Example

  const mainCanvas = new CanvasBG();
  const starField = new StarField(mainCanvas);
  const mouseTracker = new MouseTracker(mainCanvas);
  mainCanvas
    .use(starField, { as: "starfield" })
    .use(mouseTracker, { as: "mousetracker" });
  console.log(mainCanvas.layers === starField.layers); // true
  
  @returns The layers associated with the current CanvasBG instance.
  @remarks Do not modify this property directly; use the `use` method to associate layers.
  Copy

size

• get size(): {
      height: number;
      width: number;
  }

• Returns {
      height: number;
      width: number;
  }

  • height: number

  • width: number

animate

• animate(): void

• Initiates the animation loop for the canvas. This method clears the canvas, calls the draw method to draw one frame, and schedules the next frame using requestAnimationFrame(). You can override the draw method to customize drawing behavior. Make sure to call this method after binding the canvas context.

  Returns void

  Example

  const bg = new CanvasBG(".bg-canvas")
  .use(new StarField(null, { speed: { x: 0, y: 0, z: 0.001 }, points: 150 }))
  .use(new MouseTracker())
  .use(new Constellation());
  bg.animate();
  Copy

  Remarks

  Don't override this method; it is used internally to bind the context.

use

• use(canvasbg, config?): CanvasBG<Config>

• Associates the current CanvasBG instance with another CanvasBG instance. This method binds the current instance with the provided canvasbg instance, allowing the current instance to inherit properties and functionality from the provided instance.

  (see animate() method for a complete example)

  Parameters

  • canvasbg: CanvasBG<any>

    The CanvasBG instance to be associated with.
  • Optional config: Partial<LayerConfig>

  Returns CanvasBG<Config>

  The current CanvasBG instance after association.

  Remarks

  Don't override this method; it is used internally to bind the context.