Style

Style

/**
 * The type of canvas style properties.
 */
interface CanvasStyle {
    /**
     * @default null
     */
    fillStyle: null | string | CanvasGradient | CanvasPattern;
    /**
     * @default null
     */
    strokeStyle: null | string | CanvasGradient | CanvasPattern;
    /**
     * @default 1
     */
    lineWidth: number;
    /**
     * @default 'butt'
     */
    lineCap: CanvasLineCap;
    /**
     * @default 'miter'
     */
    lineJoin: CanvasLineJoin;
    /**
     * @default 0
     */
    lineDashOffset: number;
    /**
     * @default null
     */
    lineDash: null | number[];
    /**
     * @default 10
     */
    miterLimit: number;
    /**
     * @default 'inherit'
     */
    direction: CanvasDirection;
    /**
     * @default '18px sans-serif'
     */
    font: string;
    /**
     * @default 'left'
     */
    textAlign: CanvasTextAlign;
    /**
     * @default 'top'
     */
    textBaseline: CanvasTextBaseline;
    /**
     * @default null
     */
    shadowColor: null | string;
    /**
     * @default 0
     */
    shadowBlur: number;
    /**
     * @default 0
     */
    shadowOffsetX: number;
    /**
     * @default 0
     */
    shadowOffsetY: number;
    /**
     * @default 1
     */
    opacity: number;
    /**
     * @default 'source-over'
     */
    compositeOperation: GlobalCompositeOperation;
    /**
     * Pixel ratio
     * @default window.devicePixelRatio
     */
    ratio: number;
    /**
     * When this is set, the bounds of the node will be rendered.
     * (useful for debugging)
     * @default null
     */
    boundsStyle: null | string | CanvasGradient | CanvasPattern;
    /**
     * @default 1
     */
    boundsWidth: number;
    /**
     * @default 'miter'
     */
    boundsJoin: CanvasLineJoin;
    /**
     * @default 0
     */
    boundsDashOffset: number;
    /**
     * @default null
     */
    boundsDash: null | number[];
    /**
     * @default .8
     */
    boundsOpacity: number;
}

/**
 * Style-related APIs.
 */
namespace Style {

    /**
     * Defaults of canvas style properties. (mutable)
     */
    const defaults: CanvasStyle;

    /**
     * Apply common style properties to canvas context.
     * (Use `Style.applyText` to apply text style
     * and `Style.applyBounds` to apply bounds style.)
     */
    const applyCommon: (style: CanvasStyle, context: CanvasRenderingContext2D) => void;

    /**
     * Apply text style properties to canvas context.
     */
    const applyText: (style: CanvasStyle, context: CanvasRenderingContext2D) => void;

    /**
     * Apply bounds style properties to canvas context.
     */
    const applyBounds: (style: CanvasStyle, context: CanvasRenderingContext2D) => void;

    /**
     * Compute child style properties
     * from child node's `style`
     * and parent node's `computedStyle`.
     * (non-inheritable properties: `fillStyle`,
     * `strokeStyle` and `shadowColor`)
     */
    const compute: (output: CanvasStyle, parentStyle: CanvasStyle, childStyle: Partial<CanvasStyle>) => void;
}