pixie/contexts

    Dark Mode
Search:
Group by:

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