Optionaloptions: anyoptional parameters for the renderer
Number of active Light2d instances uploaded to the lit batcher
for the current frame. Set by setLightUniforms. The WebGL
renderer's drawImage reads this to decide between the unlit
fast-path batcher (default) and the lit batcher (only when
lights AND a normal map are both in play).
The background color used to clear the main framebuffer. Note: alpha value will be set based on the transparent property of the renderer settings.
The normal-map texture associated with the next drawImage call,
if any. Set by Sprite.draw (and any other normal-map-aware
renderable) just before calling drawImage, then cleared back
to null after. The WebGL renderer reads this state and routes
lit quads through the shader's lighting path; the Canvas
renderer ignores it entirely.
the requested video size ratio
The GPU renderer string (WebGL only, undefined for Canvas)
true if the current rendering context is valid
The thickness of lines for shape drawing operations like
Renderer#strokeRect, Renderer#strokeEllipse
and Renderer#strokeLine. Subclasses override the
storage — CanvasRenderer proxies it to the underlying 2D
context via a getter/setter, while WebGLRenderer treats it
as a regular field consumed by its shape-stroke routines.
The Path2D instance used by the renderer to draw primitives
The renderer state container (color, tint, transform, scissor, blend mode) with a zero-allocation save/restore stack.
The renderer renderTarget
the scaling ratio to be applied to the main canvas
The given constructor options
The renderer type : Canvas, WebGL, etc... (override this property with a specific value when implementing a custom renderer)
Static_Current per-renderable depth value. WebGL batchers push it into the
vertex stream as the z component of each vertex — a no-op under the
default orthographic projection, used by perspective (Camera3d) to
scale and parallax sprites by distance. Mirrors renderable.depth,
set automatically by Renderable.preDraw via Renderer#setDepth.
return the height of the canvas which this renderer draws to
height of the system Canvas
return the width of the canvas which this renderer draws to
width of the system Canvas
Blit a texture to the screen through a shader effect. Draws a screen-aligned quad using the given texture as source and the given shader for post-processing (e.g. scanlines, desaturation). No-op on Canvas renderer.
the source texture to blit
destination x position
destination y position
destination width
destination height
the shader effect to apply
OptionalkeepBlend: booleanif true, keep current blend mode (for sprite compositing)
prepare the framebuffer for drawing a new frame
Clear the current render target to transparent black (color + stencil). Used to prepare FBOs for post-effect capture. No-op on Canvas renderer.
Create a linear gradient that can be used with Renderer#setColor.
x-axis coordinate of the start point
y-axis coordinate of the start point
x-axis coordinate of the end point
y-axis coordinate of the end point
a Gradient object
Create a radial gradient that can be used with Renderer#setColor.
x-axis coordinate of the start circle
y-axis coordinate of the start circle
radius of the start circle
x-axis coordinate of the end circle
y-axis coordinate of the end circle
radius of the end circle
a Gradient object
Disable the scissor test, allowing rendering to the full viewport. No-op on Canvas renderer.
Draw an image or sub-image into the framebuffer.
Implemented by subclasses (CanvasRenderer / WebGLRenderer).
The 9-argument signature shown here is the canonical form used
throughout the engine; the concrete renderers also accept the
shorter drawImage(image, dx, dy) and drawImage(image, dx, dy, dWidth, dHeight) variants from the HTML Canvas2D spec.
the source image
source rectangle left
source rectangle top
source rectangle width
source rectangle height
destination left
destination top
destination width
destination height
Render a Light2d instance.
Each renderer implements its own strategy: the WebGL renderer
draws lights as quads through a shared procedural radial-falloff
fragment shader (no per-light texture, color and intensity
encoded in the per-vertex tint so consecutive draws batch); the
Canvas renderer caches a small Gradient config object per
light in a WeakMap (rebuilt only when the light's radii /
color / intensity change), rasterizes it with Gradient.toCanvas()
into a single shared CanvasRenderTarget, and composites the
result via drawImage. The base implementation is a no-op so
renderers without a lighting path can be polymorphically
substituted.
Light2d itself is renderer-agnostic — it just calls
renderer.drawLight(this) and relies on the renderer to pick
the right machinery.
the Light2d instance to render
Draw a textured triangle mesh.
The mesh object must provide: vertices (Float32Array, x/y/z triplets),
uvs (Float32Array, u/v pairs), indices (Uint16Array, triangle indices),
texture (TextureAtlas), vertexCount (number), and optionally
cullBackFaces (boolean, default true).
WebGL uses hardware depth testing; Canvas uses painter's algorithm (back-to-front sort).
a Mesh renderable or compatible object
Draw a TMX tile layer. Default behavior:
layer.canvasRenderer is set (preRender bake), blit the cached
offscreen canvas in a single drawImage call;WebGLRenderer overrides this to add the procedural shader fast
path on top (when layer.renderMode === "shader") and fall through
to this base behavior for all other layers.
the TMXLayer to draw
the visible region in world coords
Enable the scissor test with the given rectangle. No-op on Canvas renderer.
x coordinate of the scissor rectangle
y coordinate of the scissor rectangle
width of the scissor rectangle
height of the scissor rectangle
Fill an axis-aligned ellipse with the current color. Implemented by subclasses.
ellipse center X in viewport pixels
ellipse center Y in viewport pixels
horizontal radius
vertical radius
Fill an axis-aligned rectangle with the current color. Implemented by subclasses.
left edge in viewport pixels
top edge in viewport pixels
rectangle width
rectangle height
render the main framebuffer on screen
returns the current blend mode for this renderer
blend mode
return a reference to the current render target corresponding canvas which this renderer draws to
return a reference to the current render target corresponding Context
Get the current line dash pattern.
the current dash pattern
return the list of supported compressed texture formats. The base implementation returns null for all formats (no GPU compressed texture support). The WebGL renderer overrides this with actual extension availability.
an object with one key per extension family, each value is the WebGL extension object or null
return the current global alpha
return true if the given compressed texture format is supported
a WebGL compressed texture format constant
Reset context state
resizes the system canvas
new width of the canvas
new height of the canvas
Pop the topmost saved state from the stack, restoring transform, alpha and clip. Pair with Renderer#save. Implemented by subclasses.
Rotate the current transform by angle (radians). Implemented by subclasses.
rotation angle in radians
Push the current transform / alpha / clip state onto an internal stack. Pair with Renderer#restore. Implemented by subclasses.
Scale the current transform by (x, y). Implemented by subclasses.
horizontal scale factor
vertical scale factor
enable/disable image smoothing (scaling interpolation) for the current render target
Optionalenable: boolean = falseEnable or disable alpha blending. No-op on Canvas renderer (Canvas always blends).
true to enable blending, false to disable
set the current blend mode. Subclasses (CanvasRenderer, WebGLRenderer) implement the actual GL/Canvas logic.
Optionalmode: string = "normal"blend mode
Set the current per-renderable depth value. WebGL batchers push it
into the vertex stream as the z component of each vertex — a no-op
under the default orthographic projection, used by perspective
(Camera3d) to scale and parallax sprites by distance.
Typically called automatically by Renderable.preDraw from the
renderable's depth property. User code only needs to call this
directly when emitting draw calls outside of a Renderable.draw()
— e.g. from a custom Container.draw() override.
Honored by the save/restore stack like setTint / setColor.
the depth value to set
Set the renderer global alpha (0..1) for subsequent draw calls. Implemented by subclasses.
opacity value in the [0..1] range
Upload the active scene lights to the lit sprite pipeline.
Called once per camera per frame by Camera2d.draw() (after the
FBO is bound, before the world tree walk fires Sprite.draw for
any normal-mapped sprite). The WebGL renderer overrides this to
pack the lights into the lit shader's uniform buffers; the Canvas
renderer cannot do per-pixel normal-map lighting and silently
ignores the call. The first time a non-empty light list is passed
in Canvas mode, a one-shot console warning is emitted.
Stage stays renderer-agnostic by passing the raw scene data — lights iterable and ambient color — and letting the renderer decide how to encode them.
Optionallights: Iterable<object, any, any>active Light2d instances; falsy/empty no-ops
Optionalambient: objectambient lighting color (0..255 RGB)
OptionaltranslateX: numberworld-to-screen X translate (matches Camera2d.draw())
OptionaltranslateY: numberworld-to-screen Y translate
Set the line dash pattern for stroke operations.
an array of numbers specifying distances to alternately draw a line and a gap. An empty array clears the dash pattern (solid lines).
A mask limits rendering elements to the shape and position of the given mask object. So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible. Mask are not preserved through renderer context save and restore.
set a coloring tint for sprite based renderables
the tint color
Optionalalpha: number = tint.alphaan alpha value to be applied to the tint
Sets the viewport for the renderer. Defines the affine transformation from normalized device coordinates to window coordinates. No-op on Canvas renderer.
Optionalx: number = 0x coordinate of the viewport origin
Optionaly: number = 0y coordinate of the viewport origin
Optionalw: numberwidth of the viewport (defaults to canvas width)
Optionalh: numberheight of the viewport (defaults to canvas height)
Stroke (outline) an axis-aligned ellipse with the current color at the current Renderer#lineWidth. Implemented by subclasses.
ellipse center X in viewport pixels
ellipse center Y in viewport pixels
horizontal radius
vertical radius
Optionalfill: booleanalso fill the ellipse
Draw a straight line between two points with the current color at the current Renderer#lineWidth. Implemented by subclasses.
start X in viewport pixels
start Y in viewport pixels
end X in viewport pixels
end Y in viewport pixels
Stroke (outline) an axis-aligned rectangle with the current color at the current Renderer#lineWidth. Implemented by subclasses.
left edge in viewport pixels
top edge in viewport pixels
rectangle width
rectangle height
Optionalfill: booleanalso fill the rectangle
tint the given image or canvas using the given color
the source image to be tinted
the color that will be used to tint the image
Optionalmode: string = "multiply"the composition mode used to tint the image
a new canvas or offscreencanvas (if supported) element representing the tinted image
creates a Blob object representing the last rendered frame
Optionaltype: string = "image/png"A string indicating the image format
Optionalquality: numberA Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
A Promise returning a Blob object representing the last rendered frame
returns a data URL containing a representation of the last frame rendered
Optionaltype: string = "image/png"A string indicating the image format
Optionalquality: numberA Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
A Promise returning a string containing the requested data URL.
creates an ImageBitmap object of the last frame rendered (not supported by standard Canvas)
Optionaltype: string = "image/png"A string indicating the image format
Optionalquality: numberA Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
A Promise returning an ImageBitmap.
Translate the current transform by (x, y). Implemented by subclasses.
horizontal translation in pixels
vertical translation in pixels
StaticcreateCreate and return a new Canvas element (or OffscreenCanvas when
supported and returnOffscreenCanvas is true). Centralized
renderer-side allocator so every scratch / fallback / render-
target canvas in the engine routes through the same
OffscreenCanvas-aware path, instead of duplicating
document.createElement calls that throw in worker contexts.
canvas width in pixels
canvas height in pixels
OptionalreturnOffscreenCanvas: boolean = falsereturn an
OffscreenCanvas if the platform supports it
a new canvas of the given size
StaticgetShared 1×1 fully-white canvas used as a no-op texture fallback.
Renderers and renderables that need a "blank" texture binding
(e.g. to satisfy a shader's sampler input when there's no real
image — Kd-only Mesh materials, solid-color quad fills, etc.)
should use this rather than allocating their own.
Lazily created on first call; shared across every caller; uses
OffscreenCanvas where supported (worker-safe). Static so it's
accessible without a renderer instance (e.g. from a Mesh
constructor that runs before the active renderer is set).
the shared 1×1 white canvas
a base renderer object