API Docs for: 0.99.4
Show:

JXG.CanvasRenderer Class

Module: JXG

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

Methods

_drawFilledPolygon

(
  • shape
)
private

Draws a filled polygon.

Parameters:

  • shape Array

    A matrix presented by a two dimensional array of numbers.

See also:

_fill

(
  • element
)
private

Sets the fill color and fills an area.

Parameters:

_rotatePoint

(
  • angle
  • x
  • y
)
Array private

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

Parameters:

  • angle Number

    An angle, given in rad.

  • x Number

    X coordinate of the point.

  • y Number

    Y coordinate of the point.

Returns:

Array:

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

_rotateShape

(
  • shape
  • angle
)
Array private

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

Parameters:

  • shape Array

    An array of array of point coordinates.

  • angle Number

    The angle in rad the points are rotated by.

Returns:

Array:

Array of array of two dimensional point coordinates.

_setColor

(
  • element
  • [type='stroke']
  • [targetType=type]
)
Boolean private

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:

  • element JXG.GeometryElement

    Any JSXGraph element.

  • [type='stroke'] String optional

    Either fill or stroke.

  • [targetType=type] String optional

    (optional) Either fill or stroke.

Returns:

Boolean:

If the color could be set, true is returned.

_stroke

(
  • element
)
private

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

Parameters:

_translateShape

(
  • shape
  • x
  • y
)
Array private

Translates a set of points.

Parameters:

  • shape Array

    An array of point coordinates.

  • x Number

    Translation in X direction.

  • y Number

    Translation in Y direction.

Returns:

Array:

An array of translated point coordinates.

_updateVisual

(
  • element
  • [not={}]
  • [enhanced=false]
)
private

Update visual properties, but only if JXG.AbstractRenderer#enhancedRendering or enhanced is set to true.

Parameters:

  • element JXG.GeometryElement

    The element to update

  • [not={}] Object optional

    Select properties you don't want to be updated: {fill: true, dash: true} updates everything except for fill and dash. Possible values are stroke, fill, dash, shadow, gradient.

  • [enhanced=false] Boolean optional

    If true, {@link JXG.AbstractRenderer#enhancedRendering} is assumed to be true.

appendChildPrim

(
  • node
  • level
)

Appends a node to a specific layer level. This is just an abstract method and has to be implemented in all renderers that want to use the createPrim model to draw.

Parameters:

  • node Node

    A DOM tree node.

  • level Number

    The layer the node is attached to. This is the index of the layer in {@link JXG.SVGRenderer#layer} or the z-index style property of the node in VMLRenderer.

appendNodesToElement

(
  • element
  • type
)

Stores the rendering nodes. This is an abstract method which has to be implemented in all renderers that use the createPrim method.

Parameters:

changePointStyle

(
  • element
)

Changes the style of a JXG.Point. This is required because the point styles differ in what elements have to be drawn, e.g. if the point is marked by a "x" or a "+" two lines are drawn, if it's marked by spot a circle is drawn. This method removes the old renderer element(s) and creates the new one(s).

Parameters:

  • element JXG.Point

    Reference to a {@link JXG.Point} object, that's style is changed.

See also:

createPrim

(
  • type
  • id
)
Node

Creates a node of a given type with a given id.

Parameters:

  • type String

    The type of the node to create.

  • id String

    Set the id attribute to this.

Returns:

Node:

Reference to the created node.

createTouchpoints

(
  • n
)

Create crosshair elements (Fadenkreuz) for presentations.

Parameters:

  • n Number

    Number of crosshairs.

displayCopyright

(
  • str
  • fontsize
)

Shows a small copyright notice in the top left corner of the board.

Parameters:

  • str String

    The copyright notice itself

  • fontsize Number

    Size of the font the copyright notice is written in

drawCurve

(
  • element
)

Draws a JXG.Curve on the JXG.Board.

Parameters:

  • element JXG.Curve

    Reference to a graph object, that has to be plotted.

See also:

drawEllipse

(
  • element
)

Draws a JXG.Circle

Parameters:

  • element JXG.Circle

    Reference to a {@link JXG.Circle} object that has to be drawn.

See also:

drawImage

(
  • element
)

Draws an JXG.Image on a board; This is just a template that has to be implemented by special renderers.

Parameters:

  • element JXG.Image

    Reference to the image object that is to be drawn

See also:

drawInternalText

(
  • element
)

An internal text is a JXG.Text element which is drawn using only the given renderer but no HTML. This method is only a stub, the drawing is done in the special renderers.

Parameters:

  • element JXG.Text

    Reference to a {@link JXG.Text} object

See also:

drawLine

(
  • element
)

Draws a line on the JXG.Board.

Parameters:

  • element JXG.Line

    Reference to a line object, that has to be drawn.

See also:

drawPoint

(
  • element
)

Draws a point on the JXG.Board.

Parameters:

  • element JXG.Point

    Reference to a {@link JXG.Point} object that has to be drawn.

See also:

drawPolygon

(
  • element
)

Draws a JXG.Polygon on the JXG.Board.

Parameters:

  • element JXG.Polygon

    Reference to a Polygon object, that is to be drawn.

See also:

drawText

(
  • element
)

Displays a JXG.Text on the JXG.Board by putting a HTML div over it.

Parameters:

  • element JXG.Text

    Reference to an {@link JXG.Text} object, that has to be displayed

See also:

drawTicks

(
  • element
)

Creates a rendering node for ticks added to a line.

Parameters:

See also:

drawZoomBar

(
  • board
)

The tiny zoom bar shown on the bottom of a board (if showNavigation on board creation is true).

Parameters:

  • board JXG.Board

    Reference to a JSXGraph board.

dumpToCanvas

()

Convert SVG construction to canvas. Only available on SVGRenderer.

See also:

  • JXG.SVGRenderer#dumpToCanvas

getElementById

(
  • id
)
Object

Wrapper for getElementById for maybe other renderers which elements are not directly accessible by DOM methods like document.getElementById().

Parameters:

  • id String

    Unique identifier for element.

Returns:

Object:

Reference to a JavaScript object. In case of SVG/VMLRenderer it's a reference to a SVG/VML node.

hide

(
  • element
)

Hides an element on the canvas; Only a stub, requires implementation in the derived renderer.

Parameters:

See also:

hideTouchpoint

(
  • i
)

Hide a specific crosshair.

Parameters:

  • i Number

    Number of the crosshair to show

highlight

(
  • element
)
JXG.AbstractRenderer

Highlights an object, i.e. changes the current colors of the object to its highlighting colors

Parameters:

Returns:

JXG.AbstractRenderer:

Reference to the renderer

See also:

joinTransforms

(
  • element
  • transformations
)
Array

Multiplication of transformations without updating. That means, at that point it is expected that the matrices contain numbers only. First, the origin in user coords is translated to (0,0) in screen coords. Then, the stretch factors are divided out. After the transformations in user coords, the stretch factors are multiplied in again, and the origin in user coords is translated back to its position. This method does not have to be implemented in a new renderer.

Parameters:

  • element JXG.GeometryElement

    A JSXGraph element. We only need its board property.

  • transformations Array

    An array of JXG.Transformations.

Returns:

Array:

A matrix represented by a two dimensional array of numbers.

See also:

makeArrows

(
  • element
)

Can be used to create the nodes to display arrows. This is an abstract method which has to be implemented in any descendant renderer.

Parameters:

noHighlight

(
  • element
)
JXG.AbstractRenderer

Uses the normal colors of an object, i.e. the opposite of JXG.AbstractRenderer#highlight.

Parameters:

Returns:

JXG.AbstractRenderer:

Reference to the renderer

See also:

remove

(
  • node
)

Removes an element node. Just a stub.

Parameters:

  • node Node

    The node to remove.

removeDraft

(
  • element
)

Puts an object from draft mode back into normal mode.

Parameters:

removeToInsertLater

(
  • element
)
Function

Remove an element and provide a function that inserts it into its original position. This method is taken from this article undefined.

Parameters:

  • element Element

    The element to be temporarily removed

Returns:

Function:

A function that inserts the element into its original position

resize

(
  • w
  • h
)

Resizes the rendering element

Parameters:

setBuffering

(
  • node
  • type
)

Sets the buffering as recommended by SVGWG. Until now only Opera supports this and will be ignored by other browsers. Although this feature is only supported by SVG we have this method in JXG.AbstractRenderer because it is called from outside the renderer.

Parameters:

setDashStyle

(
  • element
)

Sets an element's dash style.

Parameters:

setDraft

(
  • element
)

Puts an object into draft mode, i.e. it's visual appearance will be changed. For GEONExT backwards compatibility.

Parameters:

setGradient

(
  • element
)

Sets up nodes for rendering a gradient fill.

Parameters:

setObjectFillColor

(
  • element
  • color
  • opacity
)

Sets an objects fill color.

Parameters:

  • element JXG.GeometryElement

    Reference of the object that wants a new fill color.

  • color String

    Color in a HTML/CSS compatible format. If you don't want any fill color at all, choose 'none'.

  • opacity Number

    Opacity of the fill color. Must be between 0 and 1.

setObjectStrokeColor

(
  • element
  • color
  • opacity
)

Changes an objects stroke color to the given color.

Parameters:

  • element JXG.GeometryElement

    Reference of the {@link JXG.GeometryElement} that gets a new stroke color.

  • color String

    Color value in a HTML compatible format, e.g. #00ff00 or green for green.

  • opacity Number

    Opacity of the fill color. Must be between 0 and 1.

setObjectStrokeWidth

(
  • element
  • width
)

Sets an element's stroke width.

Parameters:

  • element JXG.GeometryElement

    Reference to the geometry element.

  • width Number

    The new stroke width to be assigned to the element.

setPropertyPrim

(
  • node
  • key
  • val
)

Sets a node's attribute.

Parameters:

  • node Node

    The node that is to be updated.

  • key String

    Name of the attribute.

  • val String

    New value for the attribute.

setShadow

(
  • element
)

Sets the shadow properties to a geometry element. This method is only a stub, it is implemented in the actual renderers.

Parameters:

show

(
  • element
)

Shows a hidden element on the canvas; Only a stub, requires implementation in the derived renderer.

Parameters:

See also:

showTouchpoint

(
  • i
)

Show a specific crosshair.

Parameters:

  • i Number

    Number of the crosshair to show

suspendRedraw

()

Stop redraw. This method is called before every update, so a non-vector-graphics based renderer can use this method to delete the contents of the drawing panel. This is an abstract method every descendant renderer should implement, if appropriate.

See also:

transformImage

(
  • element
  • transformations
)

Applies transformations on images and text elements. This method is just a stub and has to be implemented in all descendant classes where text and image transformations are to be supported.

Parameters:

  • element JXG.Image | JXG.Text

    A {@link JXG.Image} or {@link JXG.Text} object.

  • transformations Array

    An array of {@link JXG.Transformation} objects. This is usually the transformations property of the given element el.

unsuspendRedraw

()

Restart redraw. This method is called after updating all the rendering node attributes.

See also:

updateCurve

(
  • element
)

Updates visual appearance of the renderer element assigned to the given JXG.Curve.

Parameters:

  • element JXG.Curve

    Reference to a {@link JXG.Curve} object, that has to be updated.

See also:

updateEllipse

(
  • element
)

Updates visual appearance of a given JXG.Circle on the JXG.Board.

Parameters:

  • element JXG.Circle

    Reference to a {@link JXG.Circle} object, that has to be updated.

See also:

updateEllipsePrim

(
  • node
  • x
  • y
  • rx
  • ry
)

Updates an ellipse node primitive. This is an abstract method which has to be implemented in all renderers that use the createPrim method.

Parameters:

  • node Node

    Reference to the node.

  • x Number

    Centre X coordinate

  • y Number

    Centre Y coordinate

  • rx Number

    The x-axis radius.

  • ry Number

    The y-axis radius.

updateGradient

(
  • element
)

Updates the gradient fill.

Parameters:

updateImage

(
  • element
)

Updates the properties of an JXG.Image element.

Parameters:

  • element JXG.Image

    Reference to an {@link JXG.Image} object, that has to be updated.

See also:

updateImageStyle

(
  • el
  • doHighlight
)

Updates CSS style properties of a JXG.Image node. In SVGRenderer opacity is the only available style element. This function is called by highlight() and nohighlight(). This function works for VML. It does not work for Canvas. SVGRenderer overwrites this method.

Parameters:

  • el JXG.Text

    Reference to the {@link JXG.Image} object, that has to be updated.

  • doHighlight Boolean

See also:

updateImageURL

(
  • element
)

If the URL of the image is provided by a function the URL has to be updated during updateImage()

Parameters:

  • element JXG.Image

    Reference to an image object.

See also:

updateInternalText

(
  • element
)

Updates visual properties of an already existing JXG.Text element.

Parameters:

  • element JXG.Text

    Reference to an {@link JXG.Text} object, that has to be updated.

See also:

updateInternalTextStyle

() private

Set color and opacity of internal texts. This method is used for Canvas and VML. SVG needs its own version.

See also:

updateLine

(
  • element
)

Updates visual appearance of the renderer element assigned to the given JXG.Line.

Parameters:

  • element JXG.Line

    Reference to the {@link JXG.Line} object that has to be updated.

See also:

updateLinePrim

(
  • node
  • p1x
  • p1y
  • p2x
  • p2y
  • board
)

Refreshes a line node. This is an abstract method which has to be implemented in all renderers that use the createPrim method.

Parameters:

  • node Node

    The node to be refreshed.

  • p1x Number

    The first point's x coordinate.

  • p1y Number

    The first point's y coordinate.

  • p2x Number

    The second point's x coordinate.

  • p2y Number

    The second point's y coordinate.

  • board JXG.Board

updatePathPrim

(
  • node
  • pathString
  • board
)

Updates a path element. This is an abstract method which has to be implemented in all renderers that use the createPrim method.

Parameters:

  • node Node

    The path node.

  • pathString String

    A string formatted like e.g. 'M 1,2 L 3,1 L5,5'. The format of the string depends on the rendering engine.

  • board JXG.Board

    Reference to the element's board.

updatePathStringBezierPrim

(
  • element
)

Builds a path data string from a JXG.Curve element such that the curve looks like hand drawn. Since the path data strings heavily depend on the underlying rendering technique this method is just a stub. Although such a path string is of no use for the CanvasRenderer, this method is used there to draw a path directly.

Parameters:

updatePathStringPoint

(
  • element
  • size
  • type
)

Builds a path data string to draw a point with a face other than rect and circle. Since the format of such a string usually depends on the renderer this method is only an abstract method. Therefore, it has to be implemented in the descendant renderer itself unless the renderer does not use the createPrim interface but the draw* interfaces to paint.

Parameters:

  • element JXG.Point

    The point element

  • size Number

    A positive number describing the size. Usually the half of the width and height of the drawn point.

  • type String

    A string describing the point's face. This method only accepts the shortcut version of each possible face: x, +, <>, ^, v, >, <

updatePathStringPrim

(
  • element
)

Builds a path data string from a JXG.Curve element. Since the path data strings heavily depend on the underlying rendering technique this method is just a stub. Although such a path string is of no use for the CanvasRenderer, this method is used there to draw a path directly.

Parameters:

updatePoint

(
  • element
)

Updates visual appearance of the renderer element assigned to the given JXG.Point.

Parameters:

  • element JXG.Point

    Reference to a {@link JXG.Point} object, that has to be updated.

See also:

updatePolygon

(
  • element
)

Updates properties of a JXG.Polygon's rendering node.

Parameters:

  • element JXG.Polygon

    Reference to a {@link JXG.Polygon} object, that has to be updated.

See also:

updatePolygonPrim

(
  • node
  • element
)

Update a polygon primitive.

Parameters:

  • node Node
  • element JXG.Polygon

    A JSXGraph element of type {@link JXG.Polygon}

updateRectPrim

(
  • node
  • x
  • y
  • w
  • h
)

Update a rectangle primitive. This is used only for points with face of type 'rect'.

Parameters:

  • node Node

    The node yearning to be updated.

  • x Number

    x coordinate of the top left vertex.

  • y Number

    y coordinate of the top left vertex.

  • w Number

    Width of the rectangle.

  • h Number

    The rectangle's height.

updateText

(
  • el
)

Updates visual properties of an already existing JXG.Text element.

Parameters:

  • el JXG.Text

    Reference to an {@link JXG.Text} object, that has to be updated.

See also:

updateTextStyle

(
  • element
  • doHighlight
)

Updates font-size, color and opacity propertiey and CSS style properties of a JXG.Text node. This function is also called by highlight() and nohighlight().

Parameters:

  • element JXG.Text

    Reference to the {@link JXG.Text} object, that has to be updated.

  • doHighlight Boolean

See also:

updateTicks

(
  • element
)

Update Ticks on a JXG.Line. This method is only a stub and has to be implemented in any descendant renderer class.

Parameters:

  • element JXG.Ticks

    Reference of a ticks object that has to be updated.

See also:

updateTouchpoint

(
  • i
  • pos
)

Move a specific crosshair.

Parameters:

  • i Number

    Number of the crosshair to show

  • pos Array

    New positon in screen coordinates

Properties

container

Node

The HTML element that stores the JSXGraph board in it.

enhancedRendering

Boolean

If this property is set to true the visual properties of the elements are updated on every update. Visual properties means: All the stuff stored in the JXG.GeometryElement#visProp property won't be set if enhancedRendering is false

Default: true

supportsForeignObject

Boolean private

True if the browsers' SVG engine supports foreignObject. Not supporting browsers are IE 9 - 11.

type

String

This is used to easily determine which renderer we are using. Possible values are 'svg', 'vml', 'canvas', 'no'.

Example:

if (board.renderer.type === 'vml') {
                       // do something
                    }

vOffsetText

Number

The vertical offset for Text elements. Every Text element will be placed this amount of pixels below the user given coordinates.

Default: 8