gibbon.js/lib/src/utils/canvas-draw.js

Actor/Component system for use with pixi.js.

import { htmlStr } from './color-utils';
import { BaseTexture, Sprite } from 'pixi.js';
export class CanvasDraw {
    canvas;
    width;
    height;
    /**
     *
     * @returns New Texture from Canvas content.
     */
    getTexture() {
        return BaseTexture.from(this.canvas);
    }
    getContext() { return this.canvas.getContext('2d'); }
    constructor(width, height) {
        this.canvas = document.createElement('canvas');
        this.width = width;
        this.height = height;
        this.canvas.width = width;
        this.canvas.height = height;
    }
    /**
     * Create sprite from current image.
     * @returns
     */
    toSprite() { return Sprite.from(this.canvas); }
    /**
     * Create radial gradient. x,y will default to canvas center.
     * @param x
     * @param y
     */
    gradRadial(gradient, r0, r1, x, y) {
        const ctx = this.canvas.getContext('2d');
        x = x === undefined ? this.width / 2 : x;
        y = y === undefined ? this.height / 2 : y;
        const grad = ctx.createRadialGradient(x, y, r0, x, y, r1);
        gradient.addStops(grad);
        ctx.fillStyle = grad;
        const r = Math.max(r0, r1);
        ctx.beginPath();
        ctx.ellipse(x, y, r, r, 0, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fill();
    }
    /**
     * @param {Point} p0
     * @param {Point} p1
     * @param {Gradient} gradient
     */
    gradFill(p0, p1, gradient) {
        const ctx = this.canvas.getContext('2d');
        const grad = ctx.createLinearGradient(p0.x, p0.y, p1.x, p1.y);
        gradient.addStops(grad);
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, this.width, this.height);
    }
    /**
     *
     * @param {number} color
     */
    fill(color) {
        const ctx = this.canvas.getContext('2d');
        ctx.fillStyle = htmlStr(color);
        ctx.fillRect(0, 0, this.width, this.height);
    }
    clear() {
        const ctx = this.canvas.getContext('2d');
        ctx?.clearRect(0, 0, this.width, this.height);
    }
}
//# sourceMappingURL=canvas-draw.js.map