Canvas

Canvas proporciona métodos estáticos para crear, gestionar y manipular instancias de HTMLCanvasElement.

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

Crea un nuevo HTMLCanvasElement con el ancho y alto especificados.

Parámetros:

• width: El ancho del canvas en píxeles.
• height: La altura del canvas en píxeles.

Ejemplo:

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

static destroy(canvas: HTMLCanvasElement): void

Destruye el HTMLCanvasElement especificado.

Parámetros:

• canvas: El HTMLCanvasElement a destruir.

Ejemplo:

    Canvas.destroy(canvas);

static get2DContext(canvas: HTMLCanvasElement): CanvasRenderingContext2D | null

Devuelve un contexto de renderizado 2D para el canvas especificado.

Parámetros:

• canvas: El HTMLCanvasElement del cual obtener el contexto 2D.

Ejemplo:

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

static getWebGLContext(canvas: HTMLCanvasElement): WebGLRenderingContext | null

Devuelve un contexto de renderizado WebGL para el canvas especificado.

Parámetros:

• canvas: El HTMLCanvasElement del cual obtener el contexto WebGL.

Ejemplo:

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

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

Convierte el canvas especificado en un objeto Blob.

Parámetros:

• canvas: El HTMLCanvasElement a convertir.
• imageFormat (opcional): El formato de la imagen (por ejemplo, 'image/png').
• quality (opcional): El nivel de calidad (0 a 1) para formatos de imagen que lo soporten.

Ejemplo:

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