Class “CanvasContext”

Object > CanvasContext

The CanvasContext is used for drawing onto the canvas. It is a subset of the HTML5 CanvasRenderingContext2D.

Example

import {Canvas, contentView} from 'tabris';

new Canvas({layoutData: 'stretch'})
  .onResize(({target: canvas, width, height}) => {
    let context = canvas.getContext("2d", width, height);
    context.moveTo(0, 0);
    // ...
  }).appendTo(contentView);

Methods

arc(x, y, radius, startAngle, endAngle, anticlockwise?)

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).

Returns void

beginPath()

Starts a new path by emptying the list of sub-paths.

Returns void

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Adds a cubic Bézier curve to the path. The starting point is the last point in the current path.

Returns void

clearRect(x, y, width, height)

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

Returns void

closePath()

Adds a straight line from the current point to the start of the current sub-path.

Returns void

createImageData(width, height)

creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.

Returns ImageData

createImageData(imageData)

creates a new, blank ImageData object with the same dimensions as the specified existing ImageData object. All of the pixels in the new object are transparent black.

Returns ImageData

drawImage(image, dx, dy)

Draws the entire given ImageBitmap at the given coordinates (dx, dy) in its natural size.

Returns void

drawImage(image, dx, dy, dWidth, dHeight)

Draws the entire given ImageBitmap at the given coordinates (dx, dy) in the given dimension (dWidth, dHeight).

Returns void

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Draws a section (sx, sy, sWidth, sHeight) of the given ImageBitmap at the given coordinates (dx, dy) in the given dimension (dWidth, dHeight).

Returns void

fill()

Fills the current or path with the current fill style.

Returns void

fillRect(x, y, width, height)

draws a filled rectangle at (x, y) position whose size is determined by width and height. and whose color is determined by the fillStyle attribute.

Returns void

fillText(text, x, y)

Fills a given text at the given (x, y) position using the current textAlign and textBaseline values.

Returns void

getImageData(x, y, width, height)

Returns an ImageData object representing the underlying pixel data for the area of the canvas denoted by the given rectangle.

Returns ImageData

lineTo(x, y)

Connects the last point in the sub-path to the (x, y) coordinates with a straight line.

Returns void

moveTo(x, y)

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

Returns void

putImageData(imageData, x, y)

Paints data from the given ImageData object onto the bitmap at coordinates (x, y).

Returns void

quadraticCurveTo(cpx, cpy, x, y)

Adds a quadratic Bézier curve to the path. The starting point is the last point in the current path.

Returns void

rect(x, y, width, height)

Creates a path for a rectangle with the top-left corner at (x, y)

Returns void

restore()

Restores the most recently saved canvas state by popping the top entry in the drawing state stack.

Returns void

rotate(angle)

Adds a rotation to the transformation matrix.

Returns void

save()

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

Returns void

scale(x, y)

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

Returns void

setTransform(a, b, c, d, e, f)

resets (overrides) the current transformation to the identity matrix and then invokes a transformation described by the arguments of this method. The matrix has the following format: [[a, c, e], [b, d, f], [0, 0, 1]]

Returns void

stroke()

Strokes the current path with the current stroke style.

Returns void

strokeRect(x, y, width, height)

draws the outline of a rectangle at (x, y) position whose size is determined by width and height using the current stroke style.

Returns void

strokeText(text, x, y)

Strokes a given text at the given (x, y) position using the current textAlign and textBaseline values.

Returns void

transform(a, b, c, d, e, f)

Multiplies the current transformation with the matrix described by the arguments of this method. The matrix has the following format: [[a, c, e], [b, d, f], [0, 0, 1]]

Returns void

translate(x, y)

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

Returns void

Properties

fillStyle

Specifies the color to use inside shapes.

font

Specifies the current text style being used when drawing text.

lineCap

Determines how the end points of every line are drawn.

lineJoin

Determines how two connecting segments in a shape are joined together.

lineWidth

The thickness of lines in space units.

strokeStyle

Specifies the color to use for the lines around shapes.

textAlign

Specifies the current text alignment being used when drawing text.

textBaseline

Specifies the current text baseline being used when drawing text.

Change Events

lineWidthChanged

Fired when the lineWidth property has changed.

lineCapChanged

Fired when the lineCap property has changed.

lineJoinChanged

Fired when the lineJoin property has changed.

fillStyleChanged

Fired when the fillStyle property has changed.

fontChanged

Fired when the font property has changed.

strokeStyleChanged

Fired when the strokeStyle property has changed.

textAlignChanged

Fired when the textAlign property has changed.

textBaselineChanged

Fired when the textBaseline property has changed.