import Context from 'pureimage/src/context.js'

public class | source

Context

Used for drawing rectangles, text, images and other objects onto the canvas element. It provides the 2D rendering context for a drawing surface.

It has the same API as CanvasRenderingContext2D from the HTML5 canvas spec

Static Method Summary

Static Public Methods
public static	colorStringToUint32(str: string): number Color String To Unint32

Constructor Summary

Public Constructor
public	constructor(bitmap: Bitmap) Creates a new pure image Context

Member Summary

Public Members
public	bitmap: Bitmap An instance of the Bitmap class.
public	fillStyle: string The color or style to use inside shapes.
public	font: object The current text style being used when drawing text.
public	globalAlpha: Boolean The alpha value that is applied to shapes and images before they are drawn onto the canvas.
public	imageSmoothingEnabled: boolean
public	lineWidth: number The thickness of lines in space units.
public	path: Array
public	pathstart: Point Set the starting co-ordinates for the path starting point
public	strokeStyle: string The color or style to use for the lines around shapes.
public	textAlign: string
public	textBaseline: string
public	transform: Transform

Method Summary

Public Methods
public	arc(x: number, y: number, rad: number, start: number, end: number, anticlockwise: boolean): void Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
public	beginPath(): void Starts a new path by emptying the list of sub-paths.
public	bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void Adds a cubic Bézier curve to the path.
public	clearRect(x: number, y: number, w: number, h: number): void Sets all pixels in the rectangle defined by starting point `(x, y)` and size `(width, height)` to transparent black, erasing any previously drawn content.
public	clip(): void Turns the path currently being built into the current clipping path.
public	closePath(): void Causes the point of the pen to move back to the start of the current sub-path.
public	createLinearGradient(x0: , y0: , x1: , y1: ): *
public	createRadialGradient(x0: , y0: ): *
public	drawImage(bitmap: Bitmap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void Provides different ways to draw an image onto the canvas.
public	drawLine(line: Line): void Draw a line using the correct anti-aliased, or non-anti-aliased line drawing function based on the value of imageSmoothingEnabled
public	drawLine_aa(line: Line) Draw Line Anti-aliased
public	drawLine_noaa(line: Line): void Draw a line without anti-aliasing using Bresenham's algorithm
public	fill(): void Fills the current or given path with the current fill style.
public	fillPixel(x: number, y: number): void Set the background colour of a single pixel denoted by the `x` and `y` co-ordinates
public	fillRect(x: number, y: number, w: number, h: number): void Draws a filled rectangle whose starting point is at the coordinates `(x, y)` with the specified width and height and whose style is determined by the fillStyle attribute.
public	fillText(text: string, x: number, y: number): void Draws a text string at the specified coordinates, filling the string's characters with the current foreground color
public	fill_aa(): void Fill Anti-aliased
public	fill_noaa(): void Fill No Anti-aliased
public	lineTo(x: number, y: number): void Connects the last point in the sub-path to the x, y coordinates with a straight line (but does not actually draw it).
public	moveTo(x: number, y: number): void Moves the starting point of a new sub-path to the (x, y) coordinates.
public	pixelInsideClip(x: number, y: number): void Pixel Inside Clip
public	quadraticCurveTo(cp1x: number, cp1y: number, x: number, y: number): void Adds a quadratic Bézier curve to the path.
public	restore(): void Restores the most recently saved canvas state by popping the top entry in the drawing state stack.
public	rotate(angle: number): void Add a rotation to the transformation matrix.
public	save(): void Saves the entire state of the canvas by pushing the current state onto a stack
public	scale(sx: number, sy: number): void Adds a scaling transformation to the canvas units by `x` horizontally and by `y` vertically
public	stroke(): void Strokes the current or given path with the current stroke style
public	strokePixel(x: number, y: number): void Paints a pixel which has an x axis position of `x` and a y axis position of `y`
public	strokeRect(x: number, y: number, w: number, h: number): void Paints a rectangle which has a starting point at `(x, y)` and has a `w` width and an `h` height onto the canvas, using the current stroke style.
public	strokeText(text: string, x: number, y: number): void Draws the outlines of the characters of a specified text string at the given (x, y) position.
public	translate(x: number, y: number): void Adds a translation transformation by moving the canvas and its origin `x` horizontally and `y` vertically on the grid

Static Public Methods

public static colorStringToUint32(str: string): number source

Color String To Unint32

Convert a color string to Uint32 notation

Params:

Name	Type	Attribute	Description
str	string		The color string to convert

Return:

number

Example:

var uInt32 = colorStringToUint32('#FF00FF');
console.log(uInt32); // Prints 4278255615

Public Constructors

public constructor(bitmap: Bitmap) source

Creates a new pure image Context

Params:

Name	Type	Attribute	Description
bitmap	Bitmap		An instance of the Bitmap class

Public Members

public bitmap: Bitmap source

An instance of the Bitmap class. Used for direct pixel manipulation(for example setting pixel colours)

public fillStyle: string source

The color or style to use inside shapes. The default is #000 (black).

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle

public font: object source

The current text style being used when drawing text. This string uses the same syntax as the CSS font specifier

Properties:

Name	Type	Attribute	Description
size	number		The an integer representing the font size to use
family	string		The font family to set

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font

public globalAlpha: Boolean source

The alpha value that is applied to shapes and images before they are drawn onto the canvas. The value is in the range from 0.0 (fully transparent) to 1.0 (fully opaque).

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalAlpha

public imageSmoothingEnabled: boolean source

public lineWidth: number source

The thickness of lines in space units. When getting, it returns the current value (1.0 by default). When setting, zero, negative, Infinity and NaN values are ignored; otherwise the current value is set to the new value.

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth

public path: Array source

public pathstart: Point source

Set the starting co-ordinates for the path starting point

public strokeStyle: string source

The color or style to use for the lines around shapes. The default is #000 (black).

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle

public textAlign: string source

public textBaseline: string source

public transform: Transform source

Public Methods

public arc(x: number, y: number, rad: number, start: number, end: number, anticlockwise: boolean): void source

Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).

Params:

Name	Type	Attribute	Description
x	number		The x coordinate of the arc's center
y	number		The y coordinate of the arc's center
rad	number		The arc's radius
start	number		The angle at which the arc starts, measured clockwise from the positive x axis and expressed in radians
end	number		The angle at which the arc ends, measured clockwise from the positive x axis and expressed in radians
anticlockwise	boolean		A boolean which, if true, causes the arc to be drawn anticlockwise between the two angles.

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc

public beginPath(): void source

Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath

public bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void source

Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using moveTo() before creating the Bézier curve.

Params:

Name	Type	Attribute	Description
cp1x	number		The x axis of the coordinate for the first control point.
cp1y	number		The y axis of the coordinate for first control point.
cp2x	number		The x axis of the coordinate for the second control point.
cp2y	number		The y axis of the coordinate for the second control point.
x	number		The x axis of the coordinate for the end point.
y	number		The y axis of the coordinate for the end point.

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo

public clearRect(x: number, y: number, w: number, h: number): void source

Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content.

Params:

Name	Type	Attribute	Description
x	number		X position
y	number		Y position
w	number		Width
h	number		Height

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect

public clip(): void source

Turns the path currently being built into the current clipping path.

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip

public closePath(): void source

Causes the point of the pen to move back to the start of the current sub-path. It tries to add a straight line (but does not actually draw it) from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/closePath

public createLinearGradient(x0: , y0: , x1: , y1: ): * source

Params:

Name	Type	Attribute	Description
x0	*
y0	*
x1	*
y1	*

Return:

public createRadialGradient(x0: , y0: ): * source

Params:

Name	Type	Attribute	Description
x0	*
y0	*

Return:

public drawImage(bitmap: Bitmap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void source

Provides different ways to draw an image onto the canvas.

Params:

Name	Type	Attribute	Description
bitmap	Bitmap		An instance of the Bitmap class to use for drawing
sx	number		The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sy	number		The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sw	number		The width of the sub-rectangle of the source Bitmap to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by `sx` and `sy` to the bottom-right corner of the image is used.
sh	number		The height of the sub-rectangle of the source Bitmap to draw into the destination context.
dx	number		The X coordinate in the destination canvas at which to place the top-left corner of the source Bitmap
dy	number		The Y coordinate in the destination canvas at which to place the top-left corner of the source Bitmap
dw	number		The width to draw the Bitmap in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn
dh	number		The height to draw the Bitmap in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

public drawLine(line: Line): void source

Draw a line using the correct anti-aliased, or non-anti-aliased line drawing function based on the value of imageSmoothingEnabled

Params:

Name	Type	Attribute	Description
line	Line		A set of co-ordinates representing the start and end of the line. You can also pass a plain js object if you wish

Return:

void

Example:

//All of the following are valid:
ctx.drawLine({start: {x: 20, y:42}, end: {x: 20, y:90}})
ctx.drawLine(new Line(new Point(20, 42), new Point(20, 90)))
ctx.drawLine(new Line(20, 42, 20, 90))

public drawLine_aa(line: Line) source

Draw Line Anti-aliased

Draw anti-aliased line using Bresenham's algorithm

Params:

Name	Type	Attribute	Description
line	Line		A set of co-ordinates representing the start and end of the line. You can also pass a plain js object if you wish

Example:

//All of the following are valid:
ctx.drawLine({start: {x: 20, y:42}, end: {x: 20, y:90}})
ctx.drawLine(new Line(new Point(20, 42), new Point(20, 90)))
ctx.drawLine(new Line(20, 42, 20, 90))

See:

http://members.chello.at/~easyfilter/bresenham.html

public drawLine_noaa(line: Line): void source

Draw a line without anti-aliasing using Bresenham's algorithm

Params:

Name	Type	Attribute	Description
line	Line		A set of co-ordinates representing the start and end of the line. You can also pass a plain js object if you wish

Return:

void

Example:

//All of the following are valid:
ctx.drawLine({start: {x: 20, y:42}, end: {x: 20, y:90}})
ctx.drawLine(new Line(new Point(20, 42), new Point(20, 90)))
ctx.drawLine(new Line(20, 42, 20, 90))

public fill(): void source

Fills the current or given path with the current fill style. Uses fill_aa and fill_noaa depending on the the value of imageSmoothingEnabled

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill

public fillPixel(x: number, y: number): void source

Set the background colour of a single pixel denoted by the x and y co-ordinates

Params:

Name	Type	Attribute	Description
x	number		The x axis of the pixel
y	number		The y axis of the pixel

Return:

void

public fillRect(x: number, y: number, w: number, h: number): void source

Draws a filled rectangle whose starting point is at the coordinates (x, y) with the specified width and height and whose style is determined by the fillStyle attribute.

Params:

Name	Type	Attribute	Description
x	number		X position
y	number		Y position
w	number		Width
h	number		Height

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect

public fillText(text: string, x: number, y: number): void source

Draws a text string at the specified coordinates, filling the string's characters with the current foreground color

Params:

Name	Type	Attribute	Description
text	string		A string specifying the text string to render into the context. The text is rendered using the settings specified by font.
x	number		The x -coordinate of the point at which to begin drawing the text, in pixels.
y	number		The y-coordinate of the point at which to begin drawing the text, in pixels.

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText

public fill_aa(): void source

Fill Anti-aliased

Return:

void

public fill_noaa(): void source

Fill No Anti-aliased

Return:

void

public lineTo(x: number, y: number): void source

Connects the last point in the sub-path to the x, y coordinates with a straight line (but does not actually draw it).

Params:

Name	Type	Attribute	Description
x	number		The x axis of the coordinate for the end of the line.
y	number		The y axis of the coordinate for the end of the line.

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo

public moveTo(x: number, y: number): void source

Moves the starting point of a new sub-path to the (x, y) coordinates.

Params:

Name	Type	Attribute	Description
x	number		The x axis of the point.
y	number		The y axis of the point.

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/moveTo

public pixelInsideClip(x: number, y: number): void source

Pixel Inside Clip

Even/odd rule. https://en.wikipedia.org/wiki/Point_in_polygon technically this is not correct as the default algorithm for html canvas is supposed to be the non-zero winding rule instead

Params:

Name	Type	Attribute	Description
x	number
y	number

Return:

void

See:

https://en.wikipedia.org/wiki/Point_in_polygon

public quadraticCurveTo(cp1x: number, cp1y: number, x: number, y: number): void source

Adds a quadratic Bézier curve to the path. It requires two points. The first point is a control point and the second one is the end point. The starting point is the last point in the current path, which can be changed using moveTo() before creating the quadratic Bézier curve.

Params:

Name	Type	Attribute	Description
cp1x	number		The x axis of the coordinate for the control point.
cp1y	number		The y axis of the coordinate for the control point.
x	number		The x axis of the coordinate for the end point.
y	number		The y axis of the coordinate for the end point.

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo

public restore(): void source

Restores the most recently saved canvas state by popping the top entry in the drawing state stack. If there is no saved state, this method does nothing.

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore

public rotate(angle: number): void source

Add a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in adians

Params:

Name	Type	Attribute	Description
angle	number		Degrees of rotation (in radians)

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate

public save(): void source

Saves the entire state of the canvas by pushing the current state onto a stack

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save

public scale(sx: number, sy: number): void source

Adds a scaling transformation to the canvas units by x horizontally and by y vertically

Params:

Name	Type	Attribute	Description
sx	number		Scale X amount
sy	number		Scale Y amount

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate

public stroke(): void source

Strokes the current or given path with the current stroke style

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke

public strokePixel(x: number, y: number): void source

Paints a pixel which has an x axis position of x and a y axis position of y

Params:

Name	Type	Attribute	Description
x	number		The x axis of the pixel to stroke
y	number		The y axis of the pixel to stroke

Return:

void

public strokeRect(x: number, y: number, w: number, h: number): void source

Paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style.

Params:

Name	Type	Attribute	Description
x	number		X position
y	number		Y position
w	number		Width
h	number		Height

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeRect

public strokeText(text: string, x: number, y: number): void source

Draws the outlines of the characters of a specified text string at the given (x, y) position.

Params:

Name	Type	Attribute	Description
text	string		The text to draw using the current font values.
x	number		The x axis of the coordinate for the text starting point.
y	number		The y axis of the coordinate for the text starting point.

Return:

void

public translate(x: number, y: number): void source

Adds a translation transformation by moving the canvas and its origin x horizontally and y vertically on the grid

Params:

Name	Type	Attribute	Description
x	number		X position
y	number		Y position

Return:

void

See:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate

Context

Static Method Summary

Constructor Summary

Member Summary

Method Summary

Static Public Methods

public static colorStringToUint32(str: string): number source

Params:

Return:

Example:

Public Constructors

public constructor(bitmap: Bitmap) source

Params:

Public Members

public bitmap: Bitmap source

public fillStyle: string source

See:

public font: object source

Properties:

See:

public globalAlpha: Boolean source

See:

public imageSmoothingEnabled: boolean source

public lineWidth: number source

See:

public path: Array source

public pathstart: Point source

public strokeStyle: string source

See:

public textAlign: string source

public textBaseline: string source

public transform: Transform source

Public Methods

public arc(x: number, y: number, rad: number, start: number, end: number, anticlockwise: boolean): void source

Params:

Return:

See:

public beginPath(): void source

Return:

See:

public bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void source

Params:

Return:

See:

public clearRect(x: number, y: number, w: number, h: number): void source

Params:

Return:

See:

public clip(): void source

Return:

See:

public closePath(): void source

Return:

See:

public createLinearGradient(x0: *, y0: *, x1: *, y1: *): * source

Params:

Return:

public createRadialGradient(x0: *, y0: *): * source

Params:

Return:

public drawImage(bitmap: Bitmap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void source

Params:

Return:

See:

public drawLine(line: Line): void source

Params:

Return:

Example:

public drawLine_aa(line: Line) source

Params:

Example:

See:

public drawLine_noaa(line: Line): void source

Params:

Return:

Example:

public fill(): void source

Return:

See:

public fillPixel(x: number, y: number): void source

public createLinearGradient(x0: , y0: , x1: , y1: ): * source

public createRadialGradient(x0: , y0: ): * source