Raffaello_Canvas

new Raffaello_Canvas({ options })

This is the main class that you should create, within the constructor() of the global class. This will create the hidden canvas, the main structure, on wich you will add layers and render as a whole.

Usage

Condensed version

this.canvas = new Raffaello_Canvas({ 
    width: 1920,
    height: 1080,
    previewContainer: this.container.querySelector('.js-previewImage'),
    nameInputContainer: this.container.querySelector('.js-fileNameInput'),
});

Extended version

this.canvas = new Raffaello_Canvas({
  width: 1080,
  height: 1350,
  previewContainer: this.container.querySelector('.js-previewImage'),
  previewBackgroundColor: 'white', // (Optional) or style='background-color:...' on the previewContainer
  nameInputContainer: this.container.querySelector('.js-fileNameInput'),
  name: 'raffaelloImage.jpg' // (Optional) Default to nameInputContainer value
  previewQuality: 0.9, // (Optional) Default to '0.8'
  renderQuality: 0.96, // (Optional) Default to '0.96'
  cornerRadius: 0, // (Optional) Default to '0'
});

Naming convention

The instance must be called this.canvas within the constructor() of the global class object, as a lot of later options rely on this name.

Constructor Options

Name	Required	Type	Default	Description
width	✅	number	1000	Width of the canvas (in pixels)
height	✅	number	1000	Height of the canvas (in pixels)
previewContainer	✅	HTMLElement	null	...
previewBackgroundColor	❌	CSS color	'white'	...
nameInputContainer	❌	HTMLElement	null	An HTMLElement to define the name of the final image. Typically an input type. The name is grabbed using this.nameInputContainer.value. If nothing is provided the generated file will be named after the name option.
name	❌	string	'Image_Raffaello.jpg'	If no nameInputContainer is provided, the name of the final image.
previewQuality	❌	number	0.8	...
renderQuality	❌	number	0.96	...
cornerRadius	❌	number	0	Defines the corner roundness in pixels. A value of 0 means square corners. Make sure the output is in PNG format to see it.

Initiated Properties

Property	Type	Description
this.layers	Array<Object>	An array containing all the Raffaello_CanvasLayer objects that will create the final image
this.width	number	The canvas width (in pixels)
this.height	number	The canvas height (in pixels)
this.isDrawn	boolean	Returns true if the canvas has been rendered once

---

Public Methods

.addLayer()

The main method to create a Raffaello_CanvasLayer in the parameter array Raffaello_Canvas.layers. This methods should typically be called within the templateInstructions() function of the global class.

Usage exemple

new class {
  constructor() { ... }
  templateInstructions() {
      // Capture the context of the template
      const thisTemplate = this;

      // Draws with 'normal' blending mode
      this.canvas.addLayer().draw(function() {
          ...
      });

      // Draws with 'multiply' blending mode
      this.canvas.addLayer('effect', 'multiply').draw(function() {
          ...
      });

      // Drawing only appears where the next layer alpha is present
      this.canvas.addLayer('alpha').draw(function() {
          ...
      });

  }
}

Layer Ordering

Be mindful of the order in which layers are added on the canvas. Layers are rendered in the sequence they are drawn, so the order will highly affect the final output.

         FINAL IMAGE
     ╒════════════════╕
     │                │
   ╒═╧══════════════╕ │
   │ ┊              │ │
 ╒═╧══════════════╕ │ │ > FIRST Raffaello_CanvasLayer drawn
 │ ┊ └ ┉ ┉ ┉ ┉ ┉  │ ╞═╛
 │ ┊              │ │ > SECOND Raffaello_CanvasLayer drawn
 │ └ ┉ ┉ ┉ ┉ ┉ ┉  ╞═╛
 │                │ > THIRD Raffaello_CanvasLayer drawn
 ╘════════════════╛

Parameters:

.addLayer(type = 'normal', style = null)

#	Name	Required	Type	Default	Description
1	type	❌	String	'normal'	Optional - The layer type. 'normal' / 'effect' / 'alpha'
2	style	❌	String	null	Optional - The second parameter, when the type is defined 'effect'

Returns: a new instance of a Raffaello_CanvasLayer

The type is a parameter that will define the compositing operation to apply when drawing the layer, similar to a blend style fusion parameter. It defines the parameter globalCompositeOperation when drawing on the canvas, see the complete documentation.

Type value	Description
'normal'	The blend style is equivalent to globalCompositeOperation 'normal'.
'effect'	The blend style is equivalent to globalCompositeOperation second parameter style. It can be any of globalCompositeOperation properties.
'alpha'	The blend style is equivalent to globalCompositeOperation 'source-in' to the following drawn layer.

---

.updateLayers()

Triggers a partial re-render of one or more canvas layers by their index.

Usage exemple

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

      ...

      // Text input interaction
      this.container.querySelector('.myTextInput').addEventListener('input', () => this.canvas.updateLayers([3,4]));

      ...
  }
  templateInstructions() { ... }
}

This is useful for improving performance or reacting to user input (e.g. live text updates or slider-driven changes) without re-rendering the entire canvas stack.

Parameters:

.updateLayers(array)

Name	Type	Default	Description
array	integer Array	null	The index of the layers to update. Base 0

Returns:

void — This method performs a side effect (selectively redraws layers). It does not return any value.

---

.updateCanvas()

Triggers a full re-render of all the canvas layers.

Usage exemple

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

      ...

      // Text input interaction
      this.container.querySelector('.mySelect').addEventListener('input', () => this.canvas.updateCanvas());

      ...
  }
  templateInstructions() { ... }
}

Parameters:

.updateCanvas()

None.

Returns:

void — This method performs a side effect (downloads the image). It does not return any value

---

.downloadImage()

Triggers the rendering and download of the current canvas state as an image file.

Usage exemple

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

      ...

      // Download logic
      this.container.querySelector('.myButton').addEventListener('click', () => this.canvas.downloadImage());
  }
  templateInstructions() { ... }
}

This method finalizes the layers, converts the rendered canvas into an image, and automatically prompts the user to download the result (e.g. 'Image_Raffaello.jpg').

Parameters:

.downloadImage()

None.

Returns:

void — This method performs a side effect (downloads the image). It does not return any value

---