Documentation / @ripl/canvas / Canvas2DState
Interface: Canvas2DState ​
Defined in: canvas/src/mixins.ts:49
The shared CanvasRenderingContext2D state-plumbing surface applied by canvas2DStateMixin: paint, line, shadow, and text accessors mapped directly onto the native 2D context, plus the drawing, transform, measurement, and hit-testing operations common to every canvas-backed context.
Properties ​
| Property | Type | Description | Defined in |
|---|---|---|---|
direction | Direction | The current text direction. | canvas/src/mixins.ts:55 |
fill | string | The current fill style: a color or CSS gradient string. Assigning an empty value is ignored, because native canvas rejects it and the paint already in force stays in use. | canvas/src/mixins.ts:51 |
filter | string | The current filter applied to drawing operations. | canvas/src/mixins.ts:53 |
font | string | The current font used for text rendering. | canvas/src/mixins.ts:57 |
fontKerning | FontKerning | The current font kerning mode. | canvas/src/mixins.ts:59 |
globalCompositeOperation | unknown | The current compositing operation used when drawing. | canvas/src/mixins.ts:63 |
lineCap | LineCap | The current line cap style for stroke endpoints. | canvas/src/mixins.ts:65 |
lineDash | number[] | The current line dash pattern. | canvas/src/mixins.ts:67 |
lineDashOffset | number | The current offset into the line dash pattern. | canvas/src/mixins.ts:69 |
lineJoin | LineJoin | The current line join style for stroke corners. | canvas/src/mixins.ts:71 |
lineWidth | number | The current stroke width, in pixels. | canvas/src/mixins.ts:73 |
miterLimit | number | The current miter limit for stroke joins. | canvas/src/mixins.ts:75 |
opacity | number | The current global opacity applied to drawing operations. | canvas/src/mixins.ts:61 |
shadowBlur | number | The current shadow blur radius. | canvas/src/mixins.ts:77 |
shadowColor | string | The current shadow color. | canvas/src/mixins.ts:79 |
shadowOffsetX | number | The current horizontal shadow offset. | canvas/src/mixins.ts:81 |
shadowOffsetY | number | The current vertical shadow offset. | canvas/src/mixins.ts:83 |
stroke | string | The current stroke style: a color or CSS gradient string. Assigning an empty value is ignored, because native canvas rejects it and the paint already in force stays in use. | canvas/src/mixins.ts:85 |
textAlign | TextAlignment | The current horizontal text alignment. | canvas/src/mixins.ts:87 |
textBaseline | TextBaseline | The current vertical text baseline. | canvas/src/mixins.ts:89 |
Methods ​
applyClip() ​
applyClip(
path,fillRule?):void
Defined in: canvas/src/mixins.ts:129
Clips subsequent drawing operations to the given path.
Parameters ​
| Parameter | Type |
|---|---|
path | CanvasPath |
fillRule? | FillRule |
Returns ​
void
applyFill() ​
applyFill(
element,fillRule?):void
Defined in: canvas/src/mixins.ts:133
Fills the given path or text element using the current fill style.
Parameters ​
| Parameter | Type |
|---|---|
element | ContextText | CanvasPath |
fillRule? | FillRule |
Returns ​
void
applyStroke() ​
applyStroke(
element):void
Defined in: canvas/src/mixins.ts:135
Strokes the given path or text element using the current stroke style.
Parameters ​
| Parameter | Type |
|---|---|
element | ContextText | CanvasPath |
Returns ​
void
clear() ​
clear():
void
Defined in: canvas/src/mixins.ts:95
Clears the entire canvas surface.
Returns ​
void
createPath() ​
createPath(
id?):CanvasPath
Defined in: canvas/src/mixins.ts:127
Creates a new CanvasPath, optionally reusing an id for diffing efficiency.
Parameters ​
| Parameter | Type |
|---|---|
id? | string |
Returns ​
drawImage() ​
drawImage(
image,x,y,width?,height?):void
Defined in: canvas/src/mixins.ts:131
Draws an image onto the canvas at the given position, sized to the given width and height; a dimension given on its own is taken with the image's intrinsic size for the other.
Parameters ​
| Parameter | Type |
|---|---|
image | CanvasImageSource |
x | number |
y | number |
width? | number |
height? | number |
Returns ​
void
isPointInPath() ​
isPointInPath(
path,x,y,fillRule?):boolean
Defined in: canvas/src/mixins.ts:137
Tests whether a point lies inside the filled region of a path.
Parameters ​
| Parameter | Type |
|---|---|
path | ContextPath |
x | number |
y | number |
fillRule? | FillRule |
Returns ​
boolean
isPointInStroke() ​
isPointInStroke(
path,x,y):boolean
Defined in: canvas/src/mixins.ts:139
Tests whether a point lies on the stroked outline of a path.
Parameters ​
| Parameter | Type |
|---|---|
path | ContextPath |
x | number |
y | number |
Returns ​
boolean
measureText() ​
measureText(
text,font?):TextMetrics
Defined in: canvas/src/mixins.ts:125
Measures text dimensions using the canvas context's current font, text alignment, and baseline, or an optional font override.
Parameters ​
| Parameter | Type |
|---|---|
text | string |
font? | string |
Returns ​
TextMetrics
reset() ​
reset():
void
Defined in: canvas/src/mixins.ts:97
Resets the context to its default state, dropping the saved-state stack and re-installing the device-pixel-ratio transform the surface is drawn through.
Returns ​
void
restore() ​
restore():
void
Defined in: canvas/src/mixins.ts:93
Restores the most recently saved drawing state from the stack; a no-op when the stack is empty.
Returns ​
void
rotate() ​
rotate(
angle):void
Defined in: canvas/src/mixins.ts:99
Applies a rotation transformation, in radians.
Parameters ​
| Parameter | Type |
|---|---|
angle | number |
Returns ​
void
save() ​
save():
void
Defined in: canvas/src/mixins.ts:91
Saves the current drawing state, including the resolved Canvas2DState.fill and Canvas2DState.stroke strings, onto the state stack.
Returns ​
void
scale() ​
scale(
x,y):void
Defined in: canvas/src/mixins.ts:101
Applies a scale transformation.
Parameters ​
| Parameter | Type |
|---|---|
x | number |
y | number |
Returns ​
void
setTransform() ​
setTransform(
a,b,c,d,e,f):void
Defined in: canvas/src/mixins.ts:113
Replaces the current transformation matrix with [a, b, c, d, e, f].
Parameters ​
| Parameter | Type | Description |
|---|---|---|
a | number | Horizontal scaling. |
b | number | Vertical skewing. |
c | number | Horizontal skewing. |
d | number | Vertical scaling. |
e | number | Horizontal translation. |
f | number | Vertical translation. |
Returns ​
void
transform() ​
transform(
a,b,c,d,e,f):void
Defined in: canvas/src/mixins.ts:123
Multiplies the current transformation matrix by [a, b, c, d, e, f].
Parameters ​
| Parameter | Type | Description |
|---|---|---|
a | number | Horizontal scaling. |
b | number | Vertical skewing. |
c | number | Horizontal skewing. |
d | number | Vertical scaling. |
e | number | Horizontal translation. |
f | number | Vertical translation. |
Returns ​
void
translate() ​
translate(
x,y):void
Defined in: canvas/src/mixins.ts:103
Applies a translation transformation.
Parameters ​
| Parameter | Type |
|---|---|
x | number |
y | number |
Returns ​
void