JXG.CanvasRenderer

Class

Uses HTML Canvas to implement the rendering methods defined in JXG.AbstractRenderer.

Members

Own

none

Inherited

Methods

Own

(private) _drawPolygon(shape)

Draws a filled polygon.

Parameters

Name Type Description
shape Array

A matrix presented by a two dimensional array of numbers.

Details

See
  • JXG.AbstractRenderer#drawArrows
Source
renderer/canvas.js, line 115

(private) _fill(el)

Sets the fill color and fills an area.

Parameters

Name Type Description
el JXG.GeometryElement

An arbitrary JSXGraph element, preferably one with an area.

Details

Source
renderer/canvas.js, line 157

(private) _rotatePoint(angle, x, y) → {Array}

Rotates a point around (0, 0) by a given angle.

Parameters

Name Type Description
angle Number

An angle, given in rad.

x Number

X coordinate of the point.

y Number

Y coordinate of the point.

Returns

An array containing the x and y coordinate of the rotated point.

Type
Array

Details

Source
renderer/canvas.js, line 175

(private) _rotateShape(shape, angle) → {Array}

Rotates an array of points around (0, 0).

Parameters

Name Type Description
shape Array

An array of array of point coordinates.

angle Number

The angle in rad the points are rotated by.

Returns

Array of array of two dimensional point coordinates.

Type
Array

Details

Source
renderer/canvas.js, line 189

(private) _setColor(el, typeopt, targetTypeopt) → {Boolean}

Sets color and opacity for filling and stroking. type is the attribute from visProp and targetType the context[targetTypeStyle]. This is necessary, because the fill style of a text is set by the stroke attributes of the text element.

Parameters

Name Type Attributes Default Description
el JXG.GeometryElement

Any JSXGraph element.

type String <optional>
'stroke'

Either fill or stroke.

targetType String <optional>
type

(optional) Either fill or stroke.

Returns

If the color could be set, true is returned.

Type
Boolean

Details

Source
renderer/canvas.js, line 343

(private) _stroke(el)

Sets color and opacity for drawing paths and lines and draws the paths and lines.

Parameters

Name Type Description
el JXG.GeometryElement

An JSXGraph element with a stroke.

Details

Source
renderer/canvas.js, line 411

(private) _translateShape(shape, x, y) → {Array}

Translates a set of points.

Parameters

Name Type Description
shape Array

An array of point coordinates.

x Number

Translation in X direction.

y Number

Translation in Y direction.

Returns

An array of translated point coordinates.

Type
Array

Details

Source
renderer/canvas.js, line 446

(private) drawArrows(el, scr1, scr2, hl)

Draws arrows of an element (usually a line) in canvas renderer.

Parameters

Name Type Description
el JXG.GeometryElement

Line to be drawn.

scr1 Array

Screen coordinates of the start position of the line or curve.

scr2 Array

Screen coordinates of the end position of the line or curve.

hl String

String which carries information if the element is highlighted. Used for getting the correct attribute.

Details

Source
renderer/canvas.js, line 633

(private) updateGradientAngle(node, radians)

Set the gradient angle for linear color gradients.

Parameters

Name Type Description
node JXG.GeometryElement

An arbitrary JSXGraph element, preferably one with an area.

radians Number

angle value in radians. 0 is horizontal from left to right, Pi/4 is vertical from top to bottom.

Details

Source
renderer/canvas.js, line 212

(private) updateGradientCircle(node, cx, cy, r, fx, fy, fr)

Set circles for radial color gradients.

Parameters

Name Type Description
node SVGnode

SVG gradient node

cx Number

Canvas value x1 (but value between 0 and 1)

cy Number

Canvas value y1 (but value between 0 and 1)

r Number

Canvas value r1 (but value between 0 and 1)

fx Number

Canvas value x0 (but value between 0 and 1)

fy Number

Canvas value x1 (but value between 0 and 1)

fr Number

Canvas value r0 (but value between 0 and 1)

Details

Source
renderer/canvas.js, line 273

Inherited

Parameters

Name Type Description
container Node

Reference to a DOM node containing the board.

dim Object

The dimensions of the board

Properties
Name Type Description
width Number
height Number

Details

See
Source
renderer/canvas.js, line 59

Extends