Global Class Object

RAFFAELLO is a class object based library. The idea is that for every RAFFAELLO template in your page you have to declare an unnamed class instantiated inline. This class shoud only holds a constructor() and a method templateInstructions().

new class {
    constructor() { 
        // Initialization logic
    }
    templateInstructions() {
        // Drawing logic
    }
}

This class will be the rendering unit for a signle Raffaello-based canvas. You can have as many unnamed class as you like in a page. Each one will encapsulate all the necessary setup and rendering logic inside a single object, enabling modular, clean, and reusable rendering flows.

Method Names

The constructor() and the method templateInstructions() are required and follow this strict naming conventions, as a lot of inner functions rely on these names.

This class pattern between constructor and explicitely named method encourages a clear separation of phases within templates:

Phase	Purpose
`constructor()`	Initialization of canvas, inputs, and DOM interactions
`templateInstructions()`	All layered drawing logic for preview and export

constructor()

Within the constructor(), you initialize all the element for the template. The canvas, the inputs and the users interactions.

Usage exemple
new class {
  constructor() { 
      // Get the DOW container
      this.container = document.querySelector('#abcdef');

      // Main canvas initialization
      this.canvas = new Raffaello_Canvas({ ... });

      // Image input initialization
      ...

      // Other inputs interactions
      ...

      // Download logic
      ...
  }

  templateInstructions() { ... }
}

You must define and maintain some key instance properties to ensure the rendering logic works correctly. These properties are required and should follow strict naming conventions:

Property	Required	Type	Description
`this.container`	✅	HTMLElement	The root DOM container that holds all related inputs.
`this.canvas`	✅	Raffaello_Canvas	The main canvas rendering engine. Used to create layers, draw, and export images.

templateInstructions()

This methods will hold all the instructions to create the templated image. It should be named templateInstructions() as some core function expect this name.

Typical Usage

Usage exemple
new class {
  constructor() { 
      this.canvas = new Raffaello_Canvas({ ... });
  }

  templateInstructions() {
      // Capture the context of the template
      const thisTemplate = this;

      // LAYER 0
      this.canvas.addLayer().draw(function() {
          ... 
      });

      // LAYER 1
      this.canvas.addLayer().draw(function() {
          ... 
      });

      // ETC.
  }
}

why use const thisTemplate = this

When you call .addLayer().draw(function() { ... }), the this keyword no longer refers to your global class instance — it now refers to the internal layer drawing context.

To still access your outer class (e.g. to call this.container, this.inputImage, or this.canvas), you must store it beforehand with const thisTemplate = this;.

This allows you to access properties from your outer class within the draw() function, like:

new class {
    constructor() { 
        this.container = ... // <- 🎯 What you want to access   
    }

    templateInstructions() {
        // Capture the context of the template
        const thisTemplate = this;

        this.canvas.addLayer().draw(function() {
            this.container.querySelector(...) // ❌ Will FAILL

            thisTemplate.container.querySelector(...) // ✅ Will SUCCEED
        });
    }
}

constructor()​

templateInstructions()​

constructor()

templateInstructions()