/** * additional import for TypeScript * @import {Rect} from "./../../geometries/rectangle.ts"; * @import {RoundRect} from "./../../geometries/roundrect.ts"; * @import {Polygon} from "../../geometries/polygon.ts"; * @import {Line} from "./../../geometries/line.ts"; * @import {Ellipse} from "./../../geometries/ellipse.ts"; * @import {Matrix2d} from "../../math/matrix2d.ts"; * @import {Bounds} from "../../physics/bounds.ts"; * @import {default as Texture2d} from "../texture/texture2d.ts"; */ /** * a canvas renderer object * @category Rendering */ export default class CanvasRenderer extends Renderer { cache: TextureCache; onGameReset: () => void; /** * set/change the current projection matrix. * In Canvas mode, this applies the ortho projection as a canvas 2D transform * (translate + scale) to map world coordinates to screen coordinates. * @param {Matrix3d} matrix - the new projection matrix */ setProjection(matrix: Matrix3d): void; /** * set the current blend mode for this renderer.
* This renderer supports every mode below except `"none"`:
* - "normal" : draws new content on top of the existing content
*
* - "add", "additive", or "lighter" : color values are added together
*
* - "multiply" : pixels are multiplied, resulting in a darker picture
*
* - "screen" : pixels are inverted, multiplied, and inverted again (opposite of multiply)
*
* - "darken" : retains the darkest pixels of both layers
*
* - "lighten" : retains the lightest pixels of both layers
*
* - "overlay" : multiplies or screens, depending on the backdrop
*
* - "hard-light" : overlay with the layers swapped — a harsh spotlight
*
* - "soft-light" : a diffused spotlight, gentler than hard-light
*
* - "color-dodge" : brightens the backdrop to reflect the source
*
* - "color-burn" : darkens the backdrop to reflect the source
*
* - "difference" : the absolute difference of the two layers
*
* - "exclusion" : like difference, but lower in contrast
*
* - "none" : blending disabled — the source replaces the destination * outright, alpha included. **GPU backends only**: there is no * `globalCompositeOperation` that disables blending for the drawn area * alone (`"copy"` clears the rest of the surface), so this renderer falls * back to "normal" and reports it
* A few draw types cannot honour every mode — 3D meshes, and fills using * a {@link Gradient} — and fall back to "normal" with a one-time console * warning. `setBlendMode` returns what it actually applied, so comparing * the result against your request detects that case. * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation * @param {string} [mode="normal"] - blend mode * @returns {string} the blend mode actually applied (may differ if the requested mode is unsupported) */ setBlendMode(mode?: string): string; /** * Clears the main framebuffer with the given color * @param {Color|string} [color="#000000"] - CSS color. * @param {boolean} [opaque=false] - Allow transparency [default] or clear the surface completely [true] */ clearColor(color?: Color | string, opaque?: boolean): void; /** * Erase the pixels in the given rectangular area by setting them to transparent black (rgba(0,0,0,0)). * @param {number} x - x axis of the coordinate for the rectangle starting point. * @param {number} y - y axis of the coordinate for the rectangle starting point. * @param {number} width - The rectangle's width. * @param {number} height - The rectangle's height. */ clearRect(x: number, y: number, width: number, height: number): void; /** * Create a pattern with the specified repetition * @param {HTMLImageElement|SVGImageElement|HTMLVideoElement|HTMLCanvasElement|ImageBitmap|OffscreenCanvas|VideoFrame} image - Source image to be used as the pattern's image * @param {string} [repeat="no-repeat"] - Define how the pattern should be repeated. One of `"repeat"` / `"repeat-x"` / `"repeat-y"` / `"no-repeat"`. * @returns {CanvasPattern} * @see ImageLayer#repeat * @example * let tileable = renderer.createPattern(image, "repeat"); * let horizontal = renderer.createPattern(image, "repeat-x"); * let vertical = renderer.createPattern(image, "repeat-y"); * let basic = renderer.createPattern(image, "no-repeat"); */ createPattern(image: HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas | VideoFrame, repeat?: string): CanvasPattern; /** * Draw a pattern within the given rectangle. * @param {CanvasPattern} pattern - Pattern object * @param {number} x * @param {number} y * @param {number} width * @param {number} height * @see CanvasRenderer#createPattern */ drawPattern(pattern: CanvasPattern, x: number, y: number, width: number, height: number): void; /** * Draw a textured triangle mesh. * Uses per-triangle affine texture mapping with back-to-front depth * sorting (painter's algorithm) and optional backface culling. * Note: the painter's algorithm works well for convex shapes but * may produce visual artifacts with concave or self-overlapping * geometry (e.g. a torus), as Canvas 2D has no hardware depth * buffer. Use the WebGL renderer for correct depth ordering on * complex meshes. * * Multi-material meshes (`mesh.vertexColors` present) render here * via per-triangle solid fill — each triangle's three vertices * share one baked material color, so we read `vertexColors[v0]` * and use it as the triangle's fillStyle, multiplied by * `currentTint`. The single shared texture (typically the 1×1 * white-pixel fallback for Kd-only models) is bypassed in that * path. Canvas can't do per-material textures; if you need that, * use the WebGL renderer. * @param {Mesh} mesh - a Mesh renderable or compatible object */ drawMesh(mesh: Mesh): void; /** * starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path * @example * // First path * renderer.beginPath(); * renderer.setColor("blue"); * renderer.moveTo(20, 20); * renderer.lineTo(200, 20); * renderer.stroke(); * // Second path * renderer.beginPath(); * renderer.setColor("green"); * renderer.moveTo(20, 20); * renderer.lineTo(120, 120); * renderer.stroke(); */ beginPath(): void; /** * begins a new sub-path at the point specified by the given (x, y) coordinates. * @param {number} x - The x axis of the point. * @param {number} y - The y axis of the point. */ moveTo(x: number, y: number): void; /** * adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates. */ lineTo(x: any, y: any): void; /** * Adds a quadratic Bezier curve to the current sub-path. * @param {number} cpx - The x-axis coordinate of the control point. * @param {number} cpy - The y-axis coordinate of the control point. * @param {number} x - The x-axis coordinate of the end point. * @param {number} y - The y-axis coordinate of the end point. */ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void; /** * Adds a cubic Bezier curve to the current sub-path. * @param {number} cp1x - The x-axis coordinate of the first control point. * @param {number} cp1y - The y-axis coordinate of the first control point. * @param {number} cp2x - The x-axis coordinate of the second control point. * @param {number} cp2y - The y-axis coordinate of the second control point. * @param {number} x - The x-axis coordinate of the end point. * @param {number} y - The y-axis coordinate of the end point. */ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void; /** * Adds a circular arc to the current sub-path, using the given control points and radius. * @param {number} x1 - The x-axis coordinate of the first control point. * @param {number} y1 - The y-axis coordinate of the first control point. * @param {number} x2 - The x-axis coordinate of the second control point. * @param {number} y2 - The y-axis coordinate of the second control point. * @param {number} radius - The arc's radius. Must be non-negative. */ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void; /** * creates a rectangular path whose starting point is at (x, y) and whose size is specified by width and height. * @param {number} x - The x axis of the coordinate for the rectangle starting point. * @param {number} y - The y axis of the coordinate for the rectangle starting point. * @param {number} width - The rectangle's width. * @param {number} height - The rectangle's height. */ rect(x: number, y: number, width: number, height: number): void; /** * adds a rounded rectangle to the current path. * @param {number} x - The x axis of the coordinate for the rectangle starting point. * @param {number} y - The y axis of the coordinate for the rectangle starting point. * @param {number} width - The rectangle's width. * @param {number} height - The rectangle's height. * @param {number} radii - The corner radius. */ roundRect(x: number, y: number, width: number, height: number, radii: number): void; /** * stroke the given shape or the current defined path * @param {Rect|RoundRect|Polygon|Line|Ellipse|Bounds} [shape] - a shape object to stroke * @param {boolean} [fill=false] - fill the shape with the current color if true */ stroke(shape?: Rect | RoundRect | Polygon | Line | Ellipse | Bounds, fill?: boolean): void; /** * fill the given shape or the current defined path * @param {Rect|RoundRect|Polygon|Line|Ellipse|Bounds} [shape] - a shape object to fill */ fill(shape?: Rect | RoundRect | Polygon | Line | Ellipse | Bounds): void; /** * add a straight line from the current point to the start of the current sub-path. If the shape has already been closed or has only one point, this function does nothing */ closePath(): void; /** * Stroke an arc at the specified coordinates with given radius, start and end points * @param {number} x - arc center point x-axis * @param {number} y - arc center point y-axis * @param {number} radius * @param {number} start - start angle in radians * @param {number} end - end angle in radians * @param {boolean} [antiClockwise=false] - draw arc anti-clockwise * @param {boolean} [fill=false] - also fill the shape with the current color if true */ strokeArc(x: number, y: number, radius: number, start: number, end: number, antiClockwise?: boolean, fill?: boolean): void; /** * Fill an arc at the specified coordinates with given radius, start and end points * @param {number} x - arc center point x-axis * @param {number} y - arc center point y-axis * @param {number} radius * @param {number} start - start angle in radians * @param {number} end - end angle in radians * @param {boolean} [antiClockwise=false] - draw arc anti-clockwise */ fillArc(x: number, y: number, radius: number, start: number, end: number, antiClockwise?: boolean): void; /** * Fill a line of the given two points * @param {number} startX - the start x coordinate * @param {number} startY - the start y coordinate * @param {number} endX - the end x coordinate * @param {number} endY - the end y coordinate */ fillLine(startX: number, startY: number, endX: number, endY: number): void; /** * Stroke the given me.Polygon on the screen * @param {Polygon} poly - the shape to draw * @param {boolean} [fill=false] - also fill the shape with the current color if true */ strokePolygon(poly: Polygon, fill?: boolean): void; /** * Fill the given me.Polygon on the screen * @param {Polygon} poly - the shape to draw */ fillPolygon(poly: Polygon): void; /** * Stroke a rounded rectangle at the specified coordinates * @param {number} x * @param {number} y * @param {number} width * @param {number} height * @param {number} radius * @param {boolean} [fill=false] - also fill the shape with the current color if true */ strokeRoundRect(x: number, y: number, width: number, height: number, radius: number, fill?: boolean): void; /** * Draw a rounded filled rectangle at the specified coordinates * @param {number} x * @param {number} y * @param {number} width * @param {number} height * @param {number} radius */ fillRoundRect(x: number, y: number, width: number, height: number, radius: number): void; /** * Stroke a Point at the specified coordinates * @param {number} x * @param {number} y */ strokePoint(x: number, y: number): void; /** * Draw a point at the specified coordinates * @param {number} x * @param {number} y */ fillPoint(x: number, y: number): void; /** * Return the global alpha * @returns {number} global alpha value */ getGlobalAlpha(): number; /** * sets or returns the shape used to join two line segments where they meet. * There are three possible values for this property: "round", "bevel", and "miter" * @type {string} * @default "miter" */ get lineJoin(): string; /** * Reset (overrides) the renderer transformation matrix to the * identity one, and then apply the given transformation matrix. * @param {Matrix2d|Matrix3d|number} a - a matrix to transform by, or the a component to multiply the current matrix by * @param {number} [b] - the b component to multiply the current matrix by; omitted when `a` is a matrix * @param {number} [c] - the c component to multiply the current matrix by; omitted when `a` is a matrix * @param {number} [d] - the d component to multiply the current matrix by; omitted when `a` is a matrix * @param {number} [e] - the e component to multiply the current matrix by; omitted when `a` is a matrix * @param {number} [f] - the f component to multiply the current matrix by; omitted when `a` is a matrix */ setTransform(a: Matrix2d | Matrix3d | number, b?: number, c?: number, d?: number, e?: number, f?: number): void; /** * Multiply given matrix into the renderer tranformation matrix * @see {@link CanvasRenderer.setTransform} which will reset the current transform matrix prior to performing the new transformation * @param {Matrix2d|Matrix3d|number} a - a matrix to transform by, or the a component to multiply the current matrix by * @param {number} [b] - the b component to multiply the current matrix by; omitted when `a` is a matrix * @param {number} [c] - the c component to multiply the current matrix by; omitted when `a` is a matrix * @param {number} [d] - the d component to multiply the current matrix by; omitted when `a` is a matrix * @param {number} [e] - the e component to multiply the current matrix by; omitted when `a` is a matrix * @param {number} [f] - the f component to multiply the current matrix by; omitted when `a` is a matrix */ transform(a: Matrix2d | Matrix3d | number, b?: number, c?: number, d?: number, e?: number, f?: number): void; } import Renderer from "./../renderer.js"; import TextureCache from "./../texture/cache.js"; import { Color } from "./../../math/color.ts"; import type { Rect } from "./../../geometries/rectangle.ts"; import type { RoundRect } from "./../../geometries/roundrect.ts"; import type { Polygon } from "../../geometries/polygon.ts"; import type { Line } from "./../../geometries/line.ts"; import type { Ellipse } from "./../../geometries/ellipse.ts"; import type { Bounds } from "../../physics/bounds.ts"; import type { Matrix2d } from "../../math/matrix2d.ts"; //# sourceMappingURL=canvas_renderer.d.ts.map