canvas/context
Type Aliases
DrawingContext
type DrawingContext = Pick<CanvasRenderingContext2D, DrawingState>;
Defined in: dom/src/canvas/context.ts:31
DrawingState
type DrawingState = typeof drawingState[number];
Defined in: dom/src/canvas/context.ts:29
DrawingStateValue
type DrawingStateValue = CanvasRenderingContext2D[DrawingState];
Defined in: dom/src/canvas/context.ts:30
Variables
drawingState
const drawingState: readonly ["strokeStyle", "fillStyle", "globalAlpha", "lineWidth", "lineCap", "lineJoin", "miterLimit", "lineDashOffset", "shadowOffsetX", "shadowOffsetY", "shadowBlur", "shadowColor", "globalCompositeOperation", "font", "textAlign", "textBaseline", "direction", "imageSmoothingEnabled"];
Defined in: dom/src/canvas/context.ts:8
The properties of a 2D context that survive save() / restore(), and so
are what has to be carried across a resize by hand: setting canvas.width
resets the context to its defaults.
See
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save
Functions
applyDevicePixelRatio()
function applyDevicePixelRatio(
canvas,
context,
width,
height,
dpr
): void;
Defined in: dom/src/canvas/context.ts:67
Give the canvas a backing store of width * dpr by height * dpr device
pixels while keeping it width by height in CSS pixels, and scale the
context so that drawing code can work in CSS pixels throughout.
Assigning to canvas.width clears the canvas and resets the context, so
this both resizes and re-establishes the transform.
Parameters
| Parameter | Type |
|---|---|
canvas | HTMLCanvasElement |
context | CanvasRenderingContext2D |
width | number |
height | number |
dpr | number |
Returns
void
isDrawingState()
function isDrawingState(value): value is "strokeStyle" | "fillStyle" | "globalAlpha" | "lineWidth" | "lineCap" | "lineJoin" | "miterLimit" | "lineDashOffset" | "shadowOffsetX" | "shadowOffsetY" | "shadowBlur" | "shadowColor" | "globalCompositeOperation" | "font" | "textAlign" | "textBaseline" | "direction" | "imageSmoothingEnabled";
Defined in: dom/src/canvas/context.ts:33
Parameters
| Parameter | Type |
|---|---|
value | unknown |
Returns
value is "strokeStyle" | "fillStyle" | "globalAlpha" | "lineWidth" | "lineCap" | "lineJoin" | "miterLimit" | "lineDashOffset" | "shadowOffsetX" | "shadowOffsetY" | "shadowBlur" | "shadowColor" | "globalCompositeOperation" | "font" | "textAlign" | "textBaseline" | "direction" | "imageSmoothingEnabled"
readDrawingState()
function readDrawingState(context): DrawingContext;
Defined in: dom/src/canvas/context.ts:39
Copy the drawing state off a context, to put back after a resize.
Parameters
| Parameter | Type |
|---|---|
context | CanvasRenderingContext2D |
Returns
writeDrawingState()
function writeDrawingState(context, state): void;
Defined in: dom/src/canvas/context.ts:50
Put a state read by readDrawingState back onto a context.
Parameters
| Parameter | Type |
|---|---|
context | CanvasRenderingContext2D |
state | DrawingContext |
Returns
void