This file provides a Nim version of the Canvas 2D API commonly used on the web. The goal is to make picking up Pixie easy for developers familiar with using CanvasRenderingContext2D on the web. For more info, see: https://developer.mozilla.org/en-US/docs/Web/API/ContextRenderingContext2D
Types
Context = ref object image*: Image fillStyle*, strokeStyle*: Paint globalAlpha*: float32 lineWidth*: float32 miterLimit*: float32 lineCap*: LineCap lineJoin*: LineJoin font*: string ## File path to a .ttf or .otf file. fontSize*: float32 textAlign*: HorizontalAlignment lineDash: seq[float32] path: Path mat: Mat3 mask: Mask layer: Image stateStack: seq[ContextState] typefaces: Table[string, Typeface]
- Source Edit
TextMetrics = object width*: float32
- Source Edit
Procs
proc newContext(image: Image): Context {...}{.raises: [], tags: [].}
- Create a new Context that will draw to the parameter image. Source Edit
proc newContext(width, height: int): Context {...}{.inline, raises: [PixieError], tags: [].}
- Create a new Context that will draw to a new image of width and height. Source Edit
proc save(ctx: Context) {...}{.inline, raises: [PixieError], tags: [].}
- Saves the entire state of the context by pushing the current state onto a stack. Source Edit
proc saveLayer(ctx: Context) {...}{.raises: [PixieError], tags: [].}
- Saves the entire state of the context by pushing the current state onto a stack and allocates a new image layer for subsequent drawing. Calling restore blends the current layer image onto the prior layer or root image. Source Edit
proc restore(ctx: Context) {...}{.raises: [PixieError], tags: [RootEffect].}
- Restores the most recently saved context state by popping the top entry in the drawing state stack. If there is no saved state, this method does nothing. Source Edit
proc beginPath(ctx: Context) {...}{.inline, raises: [], tags: [].}
- Starts a new path by emptying the list of sub-paths. Source Edit
proc moveTo(ctx: Context; v: Vec2) {...}{.inline, raises: [], tags: [].}
- Begins a new sub-path at the point (x, y). Source Edit
proc moveTo(ctx: Context; x, y: float32) {...}{.inline, raises: [], tags: [].}
- Begins a new sub-path at the point (x, y). Source Edit
proc lineTo(ctx: Context; v: Vec2) {...}{.inline, raises: [], tags: [].}
- Adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates. Source Edit
proc lineTo(ctx: Context; x, y: float32) {...}{.inline, raises: [], tags: [].}
- Adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates. Source Edit
proc bezierCurveTo(ctx: Context; cp1, cp2, to: Vec2) {...}{.inline, raises: [], tags: [].}
- Adds a cubic Bézier curve to the current sub-path. It requires three points: the first two are control points and the third one is the end point. The starting point is the latest point in the current path, which can be changed using moveTo() before creating the Bézier curve. Source Edit
proc bezierCurveTo(ctx: Context; cp1x, cp1y, cp2x, cp2y, x, y: float32) {...}{. inline, raises: [], tags: [].}
- Adds a cubic Bézier curve to the current sub-path. It requires three points: the first two are control points and the third one is the end point. The starting point is the latest point in the current path, which can be changed using moveTo() before creating the Bézier curve. Source Edit
proc quadraticCurveTo(ctx: Context; cpx, cpy, x, y: float32) {...}{.inline, raises: [], tags: [].}
- Adds a quadratic Bézier curve to the current sub-path. It requires two points: the first one is a control point and the second one is the end point. The starting point is the latest point in the current path, which can be changed using moveTo() before creating the quadratic Bézier curve. Source Edit
proc quadraticCurveTo(ctx: Context; ctrl, to: Vec2) {...}{.inline, raises: [], tags: [].}
- Adds a quadratic Bézier curve to the current sub-path. It requires two points: the first one is a control point and the second one is the end point. The starting point is the latest point in the current path, which can be changed using moveTo() before creating the quadratic Bézier curve. Source Edit
proc arc(ctx: Context; x, y, r, a0, a1: float32; ccw: bool = false) {...}{. raises: [PixieError], tags: [].}
- Draws a circular arc. Source Edit
proc arc(ctx: Context; pos: Vec2; r: float32; a: Vec2; ccw: bool = false) {...}{. raises: [PixieError], tags: [].}
- Adds a circular arc to the current sub-path. Source Edit
proc arcTo(ctx: Context; x1, y1, x2, y2, radius: float32) {...}{. raises: [PixieError], tags: [].}
- Draws a circular arc using the given control points and radius. Source Edit
proc arcTo(ctx: Context; a, b: Vec2; r: float32) {...}{.raises: [PixieError], tags: [].}
- Adds a circular arc using the given control points and radius. Source Edit
proc closePath(ctx: Context) {...}{.inline, raises: [], tags: [].}
- Attempts to 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. Source Edit
proc rect(ctx: Context; rect: Rect) {...}{.inline, raises: [], tags: [].}
- Adds a rectangle to the current path. Source Edit
proc rect(ctx: Context; x, y, width, height: float32) {...}{.inline, raises: [], tags: [].}
- Adds a rectangle to the current path. Source Edit
proc ellipse(ctx: Context; center: Vec2; rx, ry: float32) {...}{.inline, raises: [], tags: [].}
- Adds an ellipse to the current sub-path. Source Edit
proc ellipse(ctx: Context; x, y, rx, ry: float32) {...}{.inline, raises: [], tags: [].}
- Adds an ellipse to the current sub-path. Source Edit
proc fill(ctx: Context; path: Path; windingRule = wrNonZero) {...}{. raises: [PixieError], tags: [RootEffect].}
- Fills the path with the current fillStyle. Source Edit
proc fill(ctx: Context; windingRule = wrNonZero) {...}{.inline, raises: [PixieError], tags: [RootEffect].}
- Fills the current path with the current fillStyle. Source Edit
proc clip(ctx: Context; path: Path; windingRule = wrNonZero) {...}{. raises: [PixieError], tags: [RootEffect].}
- Turns the path into the current clipping region. The previous clipping region, if any, is intersected with the current or given path to create the new clipping region. Source Edit
proc clip(ctx: Context; windingRule = wrNonZero) {...}{.inline, raises: [PixieError], tags: [RootEffect].}
- Turns the current path into the current clipping region. The previous clipping region, if any, is intersected with the current or given path to create the new clipping region. Source Edit
proc stroke(ctx: Context; path: Path) {...}{.raises: [PixieError], tags: [RootEffect].}
- Strokes (outlines) the current or given path with the current strokeStyle. Source Edit
proc stroke(ctx: Context) {...}{.inline, raises: [PixieError], tags: [RootEffect].}
- Strokes (outlines) the current or given path with the current strokeStyle. Source Edit
proc clearRect(ctx: Context; rect: Rect) {...}{.raises: [PixieError], tags: [RootEffect].}
- Erases the pixels in a rectangular area. Source Edit
proc clearRect(ctx: Context; x, y, width, height: float32) {...}{.inline, raises: [PixieError], tags: [RootEffect].}
- Erases the pixels in a rectangular area. Source Edit
proc fillRect(ctx: Context; rect: Rect) {...}{.raises: [PixieError], tags: [RootEffect].}
- Draws a rectangle that is filled according to the current fillStyle. Source Edit
proc fillRect(ctx: Context; x, y, width, height: float32) {...}{.inline, raises: [PixieError], tags: [RootEffect].}
- Draws a rectangle that is filled according to the current fillStyle. Source Edit
proc strokeRect(ctx: Context; rect: Rect) {...}{.raises: [PixieError], tags: [RootEffect].}
- Draws a rectangle that is stroked (outlined) according to the current strokeStyle and other context settings. Source Edit
proc strokeRect(ctx: Context; x, y, width, height: float32) {...}{.inline, raises: [PixieError], tags: [RootEffect].}
- Draws a rectangle that is stroked (outlined) according to the current strokeStyle and other context settings. Source Edit
proc fillText(ctx: Context; text: string; at: Vec2) {...}{.raises: [PixieError], tags: [ReadIOEffect, RootEffect, WriteIOEffect].}
- Draws a text string at the specified coordinates, filling the string's characters with the current fillStyle Source Edit
proc fillText(ctx: Context; text: string; x, y: float32) {...}{.inline, raises: [PixieError], tags: [ReadIOEffect, RootEffect, WriteIOEffect].}
- Draws the outlines of the characters of a text string at the specified coordinates. Source Edit
proc strokeText(ctx: Context; text: string; at: Vec2) {...}{.raises: [PixieError], tags: [ReadIOEffect, RootEffect, WriteIOEffect].}
- Draws the outlines of the characters of a text string at the specified coordinates. Source Edit
proc strokeText(ctx: Context; text: string; x, y: float32) {...}{.inline, raises: [PixieError], tags: [ReadIOEffect, RootEffect, WriteIOEffect].}
- Draws the outlines of the characters of a text string at the specified coordinates. Source Edit
proc measureText(ctx: Context; text: string): TextMetrics {...}{. raises: [PixieError], tags: [ReadIOEffect, RootEffect, WriteIOEffect].}
- Returns a TextMetrics object that contains information about the measured text (such as its width, for example). Source Edit
proc getLineDash(ctx: Context): seq[float32] {...}{.inline, raises: [], tags: [].}
- Source Edit
proc setLineDash(ctx: Context; lineDash: seq[float32]) {...}{.inline, raises: [], tags: [].}
- Source Edit
proc getTransform(ctx: Context): Mat3 {...}{.inline, raises: [], tags: [].}
- Retrieves the current transform matrix being applied to the context. Source Edit
proc setTransform(ctx: Context; transform: Mat3) {...}{.inline, raises: [], tags: [].}
- Overrides the transform matrix being applied to the context. Source Edit
proc transform(ctx: Context; transform: Mat3) {...}{.inline, raises: [], tags: [].}
- Multiplies the current transform with the matrix described by the arguments of this method. Source Edit
proc translate(ctx: Context; v: Vec2) {...}{.inline, raises: [], tags: [].}
- Adds a translation transformation to the current matrix. Source Edit
proc translate(ctx: Context; x, y: float32) {...}{.inline, raises: [], tags: [].}
- Adds a translation transformation to the current matrix. Source Edit
proc scale(ctx: Context; v: Vec2) {...}{.inline, raises: [], tags: [].}
- Adds a scaling transformation to the context units horizontally and/or vertically. Source Edit
proc scale(ctx: Context; x, y: float32) {...}{.inline, raises: [], tags: [].}
- Adds a scaling transformation to the context units horizontally and/or vertically. Source Edit
proc rotate(ctx: Context; angle: float32) {...}{.inline, raises: [], tags: [].}
- Adds a rotation to the transformation matrix. Source Edit
proc resetTransform(ctx: Context) {...}{.inline, raises: [], tags: [].}
- Resets the current transform to the identity matrix. Source Edit
proc drawImage(ctx: Context; image: Image; dx, dy, dWidth, dHeight: float32) {...}{. raises: [PixieError], tags: [RootEffect].}
- Draws a source image onto the destination image. Source Edit
proc drawImage(ctx: Context; image: Image; dx, dy: float32) {...}{. raises: [PixieError], tags: [RootEffect].}
- Draws a source image onto the destination image. Source Edit
proc drawImage(ctx: Context; image: Image; pos: Vec2) {...}{.raises: [PixieError], tags: [RootEffect].}
- Draws a source image onto the destination image. Source Edit
proc drawImage(ctx: Context; image: Image; rect: Rect) {...}{.raises: [PixieError], tags: [RootEffect].}
- Draws a source image onto the destination image. Source Edit
proc drawImage(ctx: Context; image: Image; sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight: float32) {...}{. raises: [PixieError], tags: [RootEffect].}
- Draws a source image onto the destination image. Source Edit
proc drawImage(ctx: Context; image: Image; src, dest: Rect) {...}{. raises: [PixieError], tags: [RootEffect].}
- Draws a source image onto the destination image. Source Edit
proc isPointInPath(ctx: Context; path: Path; pos: Vec2; windingRule = wrNonZero): bool {...}{. raises: [PixieError], tags: [].}
- Returns whether or not the specified point is contained in the current path. Source Edit
proc isPointInPath(ctx: Context; path: Path; x, y: float32; windingRule = wrNonZero): bool {...}{.inline, raises: [PixieError], tags: [].}
- Returns whether or not the specified point is contained in the current path. Source Edit
proc isPointInPath(ctx: Context; pos: Vec2; windingRule = wrNonZero): bool {...}{. inline, raises: [PixieError], tags: [].}
- Returns whether or not the specified point is contained in the current path. Source Edit
proc isPointInPath(ctx: Context; x, y: float32; windingRule = wrNonZero): bool {...}{. inline, raises: [PixieError], tags: [].}
- Returns whether or not the specified point is contained in the current path. Source Edit
proc isPointInStroke(ctx: Context; path: Path; pos: Vec2): bool {...}{. raises: [PixieError], tags: [].}
- Returns whether or not the specified point is inside the area contained by the stroking of a path. Source Edit
proc isPointInStroke(ctx: Context; path: Path; x, y: float32): bool {...}{.inline, raises: [PixieError], tags: [].}
- Returns whether or not the specified point is inside the area contained by the stroking of a path. Source Edit
proc isPointInStroke(ctx: Context; pos: Vec2): bool {...}{.inline, raises: [PixieError], tags: [].}
- Returns whether or not the specified point is inside the area contained by the stroking of a path. Source Edit
proc isPointInStroke(ctx: Context; x, y: float32): bool {...}{.inline, raises: [PixieError], tags: [].}
- Returns whether or not the specified point is inside the area contained by the stroking of a path. Source Edit
proc roundedRect(ctx: Context; x, y, w, h, nw, ne, se, sw: float32) {...}{.inline, raises: [], tags: [].}
- Adds a rounded rectangle to the current path. Source Edit
proc roundedRect(ctx: Context; rect: Rect; nw, ne, se, sw: float32) {...}{.inline, raises: [], tags: [].}
- Adds a rounded rectangle to the current path. Source Edit
proc circle(ctx: Context; cx, cy, r: float32) {...}{.inline, raises: [], tags: [].}
- Adds a circle to the current path. Source Edit
proc circle(ctx: Context; circle: Circle) {...}{.inline, raises: [], tags: [].}
- Adds a circle to the current path. Source Edit
proc polygon(ctx: Context; x, y, size: float32; sides: int) {...}{.inline, raises: [], tags: [].}
- Adds an n-sided regular polygon at (x, y) of size to the current path. Source Edit
proc polygon(ctx: Context; pos: Vec2; size: float32; sides: int) {...}{.inline, raises: [], tags: [].}
- Adds an n-sided regular polygon at (x, y) of size to the current path. Source Edit
proc strokeSegment(ctx: Context; segment: Segment) {...}{.raises: [PixieError], tags: [RootEffect].}
- Strokes a segment (draws a line from segment.at to segment.to) according to the current strokeStyle and other context settings. Source Edit
proc strokeSegment(ctx: Context; ax, ay, bx, by: float32) {...}{. raises: [PixieError], tags: [RootEffect].}
- Strokes a segment (draws a line from ax, ay to bx, by) according to the current strokeStyle and other context settings. Source Edit
proc fillRoundedRect(ctx: Context; rect: Rect; nw, ne, se, sw: float32) {...}{. raises: [PixieError], tags: [RootEffect].}
- Draws a rounded rectangle that is filled according to the current fillStyle. Source Edit
proc fillRoundedRect(ctx: Context; rect: Rect; radius: float32) {...}{.inline, raises: [PixieError], tags: [RootEffect].}
- Draws a rounded rectangle that is filled according to the current fillStyle. Source Edit
proc strokeRoundedRect(ctx: Context; rect: Rect; nw, ne, se, sw: float32) {...}{. raises: [PixieError], tags: [RootEffect].}
- Draws a rounded rectangle that is stroked (outlined) according to the current strokeStyle and other context settings. Source Edit
proc strokeRoundedRect(ctx: Context; rect: Rect; radius: float32) {...}{.inline, raises: [PixieError], tags: [RootEffect].}
- Draws a rounded rectangle that is stroked (outlined) according to the current strokeStyle and other context settings. Source Edit
proc fillEllipse(ctx: Context; center: Vec2; rx, ry: float32) {...}{. raises: [PixieError], tags: [RootEffect].}
- Draws an ellipse that is filled according to the current fillStyle. Source Edit
proc strokeEllipse(ctx: Context; center: Vec2; rx, ry: float32) {...}{. raises: [PixieError], tags: [RootEffect].}
- Draws an ellipse that is stroked (outlined) according to the current strokeStyle and other context settings. Source Edit
proc fillCircle(ctx: Context; circle: Circle) {...}{.raises: [PixieError], tags: [RootEffect].}
- Draws a circle that is filled according to the current fillStyle Source Edit
proc strokeCircle(ctx: Context; circle: Circle) {...}{.raises: [PixieError], tags: [RootEffect].}
- Draws a circle that is stroked (outlined) according to the current strokeStyle and other context settings. Source Edit
proc fillPolygon(ctx: Context; pos: Vec2; size: float32; sides: int) {...}{. raises: [PixieError], tags: [RootEffect].}
- Draws an n-sided regular polygon at (x, y) of size that is filled according to the current fillStyle. Source Edit
proc strokePolygon(ctx: Context; pos: Vec2; size: float32; sides: int) {...}{. raises: [PixieError], tags: [RootEffect].}
- Draws an n-sided regular polygon at (x, y) of size that is stroked (outlined) according to the current strokeStyle and other context settings. Source Edit