drawQuadrille(args)

The drawQuadrille function is used to render a quadrille onto the canvas or a specified graphics buffer. It provides various parameters for customizing the appearance and behavior of the drawn quadrille, including cell dimensions, colors, and display styles.

By default, drawQuadrille(quadrille) is sufficient for most cases where no custom display parameters are needed, as it uses the quadrille’s default properties for rendering. For more advanced use cases, drawQuadrille(quadrille, { options }) allows you to specify optional display parameters, such as cellLength, outline, textColor, and more, to customize the rendering behavior.

Configuration

The drawQuadrille function simplifies customization by using its { options } object literal parameter, leveraging JavaScript object destructuring to extract values directly. This approach makes function calls more readable, flexible, and maintainable, allowing you to configure only the parameters you need while relying on defaults for the rest.

Example

drawQuadrille(quadrille, {
  cellLength: 50,   // Custom size for each cell
  outline: 'blue',  // Edge color of the quadrille
  outlineWeight: 2, // Line thickness for the outline
  textColor: 'white', // Color for text inside cells
  textZoom: 0.5,    // Scale the text in cells
});

In this example, only these parameters are explicitly configured:

• cellLength: Specifies the size of each cell in pixels.
• outline: Sets the edge color of the quadrille.
• outlineWeight: Defines the thickness of the outline.
• textColor: Controls the color of any text rendered in the quadrille cells.
• textZoom: Scales the size of the text rendered in the cells.

The remaining parameters in the { options } object use their default values, making it easier to adjust specific aspects of the quadrille’s rendering without needing to pass every option explicitly.

Syntax

drawQuadrille(quadrille, [{[cellLength], [outline], [outlineWeight], [textColor], [textZoom], [textFont], [x], [y], [row], [col], [values], [graphics], [origin], [tileDisplay], [stringDisplay], [numberDisplay], [colorDisplay], [imageDisplay], [functionDisplay], [arrayDisplay], [objectDisplay]}])

Parameters