Canvas

Canvas provides static methods to create, manage, and manipulate HTMLCanvasElement instances.

static create(width: number, height: number): HTMLCanvasElement

Creates a new HTMLCanvasElement with the specified width and height.

Parameters:

• width: The width of the canvas in pixels.
• height: The height of the canvas in pixels.

Example:

const canvas = Canvas.create(800, 600);
document.body.appendChild(canvas);

static destroy(canvas: HTMLCanvasElement): void

Destroys the specified HTMLCanvasElement.

Parameters:

• canvas: The HTMLCanvasElement to destroy.

Example:

Canvas.destroy(canvas);

static get2DContext(canvas: HTMLCanvasElement): CanvasRenderingContext2D | null

Returns a 2D rendering context for the specified canvas.

Parameters:

• canvas: The HTMLCanvasElement to get the 2D context from.

Example:

const ctx = Canvas.get2DContext(canvas);
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);

static getWebGLContext(canvas: HTMLCanvasElement): WebGLRenderingContext | null

Returns a WebGL rendering context for the specified canvas.

Parameters:

• canvas: The HTMLCanvasElement to get the WebGL context from.

Example:

const gl = Canvas.getWebGLContext(canvas);
g.clearColor(0, 0, 0, 1);
g.clear(gl.COLOR_BUFFER_BIT);

static toBlob(canvas: HTMLCanvasElement, imageFormat?: string, quality?: number): Promise<Blob>

Converts the specified canvas to a Blob object.

Parameters:

• canvas: The HTMLCanvasElement to convert.
• imageFormat (optional): The image format (e.g., 'image/png').
• quality (optional): The quality level (0 to 1) for image formats that support it.

Example:

Canvas.toBlob(canvas, 'image/png', 0.9).then(blob => {
  const url = URL.createObjectURL(blob);
  console.log(url);
});