# JSXGraph 1.11.1 Reference

## JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class Index | File Index

Elements

- Angle
- Arc
- Arrow
- Arrowparallel
- Axes3D
- Axis
- Axis3D
- Bisector
- Bisectorlines
- Boxplot
- Button
- Cardinalspline
- Chart
- Checkbox
- Circle
- Circle3D
- Circumcenter
- Circumcircle
- CircumcircleArc
- CircumcircleSector
- Comb
- Conic
- Curve
- Curve3D
- CurveDifference
- CurveIntersection
- CurveUnion
- Derivative
- Ellipse
- Face3D
- ForeignObject
- Functiongraph
- Functiongraph3D
- Glider
- Grid
- Group
- Hatch
- Hyperbola
- Image
- ImplicitCurve
- Incenter
- Incircle
- Inequality
- Input
- Integral
- Intersection
- IntersectionCircle3D
- IntersectionLine3D
- Label
- Legend
- Line
- Line3D
- MajorArc
- MajorSector
- Measurement
- Mesh3D
- Metapostspline
- Midpoint
- MinorArc
- MinorSector
- MirrorElement
- MirrorPoint
- NonReflexAngle
- Normal
- Orthogonalprojection
- OtherIntersection
- Parabola
- Parallel
- Parallelogram
- Parallelpoint
- ParametricSurface3D
- Perpendicular
- PerpendicularPoint
- PerpendicularSegment
- Plane3D
- Point
- Point3D
- PolarLine
- PolePoint
- Polygon
- Polygon3D
- PolygonalChain
- Polyhedron3D
- RadicalAxis
- Reflection
- ReflexAngle
- RegularPolygon
- Riemannsum
- Sector
- Segment
- Semicircle
- Slider
- Slopefield
- Slopetriangle
- Smartlabel
- Sphere3D
- Spline
- Stepfunction
- Tangent
- TangentTo
- Tapemeasure
- Text
- Text3D
- Ticks
- Ticks3D
- Tracecurve
- Transformation
- Transformation3D
- Turtle
- Vectorfield
- Vectorfield3D
- View3D

Classes

- _global_
- JXG
- JXG.AbstractRenderer
- JXG.Board
- JXG.Board.infobox
- JXG.C
- JXG.CA
- JXG.CanvasRenderer
- JXG.Chart
- JXG.Circle
- JXG.Circle3D
- JXG.Complex
- JXG.Composition
- JXG.Coords
- JXG.CoordsElement
- JXG.Curve
- JXG.Curve3D
- JXG.Dump
- JXG.EventEmitter
- JXG.Expect
- JXG.Face3D
- JXG.ForeignObject
- JXG.GeometryElement
- JXG.GeometryElement3D
- JXG.GeonextParser
- JXG.Group
- JXG.Image
- JXG.JessieCode
- JXG.JSXGraph
- JXG.Legend
- JXG.Line
- JXG.Line3D
- JXG.Math
- JXG.Math.BoxQuadtree
- JXG.Math.Clip
- JXG.Math.Extrapolate
- JXG.Math.Geometry
- JXG.Math.ImplicitPlot
- JXG.Math.IntervalArithmetic
- JXG.Math.Metapost
- JXG.Math.Nlp
- JXG.Math.Numerics
- JXG.Math.Plot
- JXG.Math.Poly
- JXG.Math.Poly.Monomial
- JXG.Math.Poly.Polynomial
- JXG.Math.Poly.Ring
- JXG.Math.ProbFuncs
- JXG.Math.Quadtree
- JXG.Math.Statistics
- JXG.NoRenderer
- JXG.Options
- JXG.Plane3D
- JXG.Point
- JXG.Point3D
- JXG.Polygon
- JXG.Polygon3D
- JXG.PrefixParser
- JXG.Sphere3D
- JXG.Surface3D
- JXG.SVGRenderer
- JXG.Text
- JXG.Text3D
- JXG.Ticks
- JXG.Transformation
- JXG.Turtle
- JXG.Util
- JXG.Util.Base64
- JXG.Util.Unzip
- JXG.Util.UTF8
- JXG.View3D
- JXG.VMLRenderer
- JXG.XML

# Class JXG.AbstractRenderer

↳ JXG.AbstractRenderer

JXG.AbstractRenderer
Defined in: abstract.js.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| JXG.AbstractRenderer() This class defines the interface to the graphics part of JSXGraph.

Field Summary
Field Attributes | Field Name and Description
--- | ---
| container The HTML element that stores the JSXGraph board in it.
| dashArray Defines dash patterns.
| enhancedRendering If this property is set to `true` the visual properties of the elements are updated on every update.
<private> | supportsForeignObject True if the browsers' SVG engine supports foreignObject.
| type This is used to easily determine which renderer we are using
| vOffsetText The vertical offset for Text elements.

Method Summary
Method Attributes | Method Name and Description
--- | ---
<private> | _css2js(cssString) Converts string containing CSS properties into array with key-value pair objects.
<private> | _getHighlighted(el) Get information if element is highlighted.
<private> | _setArrowWidth(node, width, parentNode) Updates width of an arrow DOM node.
<private> | _updateVisual(el, not, enhanced) Update visual properties, but only if JXG.AbstractRenderer#enhancedRendering or `enhanced` is set to true.
| appendChildPrim(node, level) Appends a node to a specific layer level.
| appendNodesToElement(el, type) Stores the rendering nodes.
| changePointStyle(el) Changes the style of a JXG.Point.
| createPrim(type, id) Creates a node of a given type with a given id.
| createTouchpoints(n) Create crosshair elements (Fadenkreuz) for presentations.
| display(el, value) Shows or hides an element on the canvas; Only a stub, requires implementation in the derived renderer.
| displayCopyright(str, fontsize) Shows a small copyright notice in the top left corner of the board.
| drawCurve(el) Draws a JXG.Curve on the JXG.Board.
| drawEllipse(el) Draws a JXG.Circle
| drawImage(el) Draws an JXG.Image on a board; This is just a template that has to be implemented by special renderers.
| drawInternalText(el) An internal text is a JXG.Text element which is drawn using only the given renderer but no HTML.
| drawLine(el) Draws a line on the JXG.Board.
<private> | drawNavigationBar(board, attr) The tiny zoom bar shown on the bottom of a board (if board attribute "showNavigation" is true).
| drawPoint(el) Draws a point on the JXG.Board.
| drawPolygon(el) Draws a JXG.Polygon on the JXG.Board.
| drawText(el) Displays a JXG.Text on the JXG.Board by putting a HTML div over it.
| drawTicks(el) Creates a rendering node for ticks added to a line.
| dumpToCanvas(canvasId, w, h, _ignoreTexts) Convert SVG construction to canvas.
| dumpToDataURI(_ignoreTexts) Convert SVG construction to base64 encoded SVG data URL.
<private> | getArrowHeadData(el, strokewidth, hl) This method determines some data about the line endings of this element.
| getElementById(id) Wrapper for getElementById for maybe other renderers which elements are not directly accessible by DOM methods like document.getElementById().
| getPositionArrowHead(el, c1, c2, a) Shorten the length of a line element such that the arrow head touches the start or end point and such that the arrow head ends exactly at the start / end position of the line.
| handleTouchpoints(el, c1, c2, a) Handle touchlastpoint / touchfirstpoint
| hide(el) Hides an element on the canvas; Only a stub, requires implementation in the derived renderer.
| hideTouchpoint(i) Hide a specific crosshair.
| highlight(el, suppressHighlightStrokeWidth) Highlights an object, i.e.
| joinTransforms(el, transformations) Multiplication of transformations without updating.
| makeArrows(el, arrowData) Can be used to create the nodes to display arrows.
| noHighlight(el) Uses the normal colors of an object, i.e.
| remove(node) Removes an element node.
| removeDraft(el) Puts an object from draft mode back into normal mode.
| removeToInsertLater(el) Remove an element and provide a function that inserts it into its original position.
| resize(w, h) Resizes the rendering element
| screenshot(board) Display SVG image in html img-tag which enables easy download for the user.
| setARIA(el) Set ARIA related properties of an element.
<private> | setArrowSize(el, arrowData) Set the arrow head size.
| setBuffering(node, type) Sets the buffering as recommended by SVGWG.
| setCssClass(el, cssClass) Sets CSS classes for elements (relevant for SVG only).
| setDashStyle(el) Sets an element's dash style.
| setDraft(el) Puts an object into draft mode, i.e.
| setGradient(el) Sets up nodes for rendering a gradient fill.
<private> | setLayer(el, value) Move element into new layer.
| setLineCap(element) Update the line endings (linecap) of a straight line from its attribute 'linecap'.
| setObjectFillColor(el, color, opacity) Sets an objects fill color.
| setObjectStrokeColor(el, color, opacity) Changes an objects stroke color to the given color.
| setObjectStrokeWidth(el, width) Sets an element's stroke width.
| setObjectTransition(el, duration) Sets the transition duration (in milliseconds) for fill color and stroke color and opacity.
| setPropertyPrim(node, key, val) Sets a node's attribute.
| setShadow(el) Sets the shadow properties to a geometry element.
| setTabindex(el) Set the attribute `tabindex` to the attribute `tabindex` of an element.
| show(el) Shows a hidden element on the canvas; Only a stub, requires implementation in the derived renderer.
| showTouchpoint(i) Show a specific crosshair.
| suspendRedraw() Stop redraw.
| transformRect(el, transformations) Applies transformations on images and text elements.
| unsuspendRedraw() Restart redraw.
| updateCurve(el) Updates visual appearance of the renderer element assigned to the given JXG.Curve.
| updateEllipse(el) Updates visual appearance of a given JXG.Circle on the JXG.Board.
| updateEllipsePrim(node, x, y, rx, ry) Updates an ellipse node primitive.
| updateGradient(el) Updates the gradient fill.
| updateImage(el) Updates the properties of an JXG.Image element.
| updateImageStyle(el, doHighlight) Updates CSS style properties of a JXG.Image node.
| updateImageURL(el) If the URL of the image is provided by a function the URL has to be updated during updateImage()
| updateInternalText(el) Updates visual properties of an already existing JXG.Text element.
<private> | updateInternalTextStyle(el, strokeColor, strokeOpacity) Set color and opacity of internal texts.
| updateLine(el) Updates visual appearance of the renderer element assigned to the given JXG.Line.
| updateLinePrim(node, p1x, p1y, p2x, p2y, board) Refreshes a line node.
<private> | updateLineWithEndings(el, arrowData) Corrects the line length if there are arrow heads, such that the arrow ends exactly at the intended position.
<private> | updatePath(el) Calls the renderer method to draw a curve.
| updatePathPrim(node, pathString, board) Updates a path element.
| updatePathStringBezierPrim(el) Builds a path data string from a JXG.Curve element such that the curve looks like hand drawn.
| updatePathStringPoint(el, size, type) Builds a path data string to draw a point with a face other than rect and circle.
| updatePathStringPrim(el) Builds a path data string from a JXG.Curve element.
<private> | updatePathWithArrowHeads(el, doHighlight) Handles arrow heads of a line or curve element and calls the renderer primitive.
| updatePoint(el) Updates visual appearance of the renderer element assigned to the given JXG.Point.
| updatePolygon(el) Updates properties of a JXG.Polygon's rendering node.
| updatePolygonPrim(node, el) Update a polygon primitive.
| updateRectPrim(node, x, y, w, h) Update a rectangle primitive.
| updateText(el) Updates visual properties of an already existing JXG.Text element.
| updateTextStyle(el, doHighlight) Updates font-size, color and opacity propertiey and CSS style properties of a JXG.Text node.
| updateTicks(el) Update Ticks on a JXG.Line.
| updateTouchpoint(i, pos) Move a specific crosshair.

Class Detail
JXG.AbstractRenderer()

This class defines the interface to the graphics part of JSXGraph. This class is an abstract class, it actually does not render anything. This is up to the JXG.SVGRenderer, JXG.VMLRenderer, and JXG.CanvasRenderer classes. We strongly discourage you from using the methods in these classes directly. Only the methods which are defined in this class and are not marked as private are guaranteed to exist in any renderer instance you can access via JXG.Board#renderer. But not all methods may work as expected.

The methods of this renderer can be divided into different categories:

Draw basic elements
  In this category we find methods to draw basic elements like JXG.Point, JXG.Line, and JXG.Curve as well as assisting methods tightly bound to these basic painters. You do not need to implement these methods in a descendant renderer but instead implement the primitive drawing methods described below. This approach is encouraged when you're using a XML based rendering engine like VML and SVG. If you want to use a bitmap based rendering technique you are supposed to override these methods instead of the primitive drawing methods.
Draw primitives
  This category summarizes methods to handle primitive nodes. As creation and management of these nodes is different among different the rendering techniques most of these methods are purely virtual and need proper implementation if you choose to not overwrite the basic element drawing methods.
Attribute manipulation
  In XML based renders you have to manipulate XML nodes and their attributes to change the graphics. For that purpose attribute manipulation methods are defined to set the color, opacity, and other things. Please note that some of these methods are required in bitmap based renderers, too, because some elements like JXG.Text can be HTML nodes floating over the construction.
Renderer control
  Methods to clear the drawing board or to stop and to resume the rendering engine.

See:
  JXG.SVGRenderer
  JXG.VMLRenderer
  JXG.CanvasRenderer

Field Detail
{Node} container
The HTML element that stores the JSXGraph board in it.

{Array} dashArray
Defines dash patterns. Sizes are in pixel. Defined styles are:

1. 2 dash, 2 space
2. 5 dash, 5 space
3. 10 dash, 10 space
4. 20 dash, 20 space
5. 20 dash, 10 space, 10 dash, 10 space
6. 20 dash, 5 space, 10 dash, 5 space
7. 0 dash, 5 space (dotted line)

This means, the numbering is 1-based. Solid lines are set with dash:0. If the object's attribute "dashScale:true" the dash pattern is multiplied by strokeWidth / 2.

See:
  JXG.GeometryElement#dash
  JXG.GeometryElement#dashScale

Default Value:
  [[2, 2], [5, 5], [10, 10], [20, 20], [20, 10, 10, 10], [20, 5, 10, 5], [0, 5]]

{Boolean} enhancedRendering
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 Value:
  true

<private> {Boolean} supportsForeignObject
True if the browsers' SVG engine supports foreignObject. Not supported browsers are IE 9 - 11. It is tested in svg renderer.

{String} type
This is used to easily determine which renderer we are using

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

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

Default Value:
  0

Method Detail
<private> {Array} _css2js(cssString)
Converts string containing CSS properties into array with key-value pair objects.

Parameters:
{String} cssString
  String containing CSS properties

Returns:
  {Array} Array of CSS key-value pairs

Examples:

    "color:blue; background-color:yellow" is converted to
    [{'color': 'blue'}, {'backgroundColor': 'yellow'}]

<private> {String} _getHighlighted(el)
Get information if element is highlighted.

Parameters:
{JXG.GeometryElement} el
  The element which is tested for being highlighted.

Returns:
  {String} 'highlight' if highlighted, otherwise the ampty string '' is returned.

<private> _setArrowWidth(node, width, parentNode)
Updates width of an arrow DOM node. Used in

Parameters:
{Node} node
  The arrow node.
{Number} width
{Node} parentNode
  Used in IE only

<private> _updateVisual(el, not, enhanced)
Update visual properties, but only if JXG.AbstractRenderer#enhancedRendering or `enhanced` is set to true.

Parameters:
{JXG.GeometryElement} el
  The element to update
{Object} not Optional, Default: {}
  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`.
{Boolean} enhanced Optional, Default: false
  If true, 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.
{Number} level
  The layer the node is attached to. This is the index of the layer in JXG.SVGRenderer#layer or the `z-index` style property of the node in VMLRenderer.

appendNodesToElement(el, type)
Stores the rendering nodes. This is an abstract method which has to be implemented in all renderers that use the `createPrim` method.

Parameters:
{JXG.GeometryElement} el
  A JSXGraph element.
{String} type
  The XML node name. Only used in VMLRenderer.

changePointStyle(el)
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:
{JXG.Point} el
  Reference to a JXG.Point object, that's style is changed.

See:
  Point
  JXG.Point
  JXG.AbstractRenderer#updatePoint
  JXG.AbstractRenderer#drawPoint

{Node} createPrim(type, id)
Creates a node of a given type with a given id.

Parameters:
{String} type
  The type of the node to create.
{String} id
  Set the id attribute to this.

Returns:
  {Node} Reference to the created node.

createTouchpoints(n)
Create crosshair elements (Fadenkreuz) for presentations.

Parameters:
{Number} n
  Number of crosshairs.

display(el, value)
Shows or hides an element on the canvas; Only a stub, requires implementation in the derived renderer.

Parameters:
{JXG.GeometryElement} el
  Reference to the object that has to appear.
{Boolean} value
  true to show the element, false to hide the element.

displayCopyright(str, fontsize)
Shows a small copyright notice in the top left corner of the board.

Parameters:
{String} str
  The copyright notice itself
{Number} fontsize
  Size of the font the copyright notice is written in

drawCurve(el)
Draws a JXG.Curve on the JXG.Board.

Parameters:
{JXG.Curve} el
  Reference to a graph object, that has to be plotted.

See:
  Curve
  JXG.Curve
  JXG.AbstractRenderer#updateCurve

drawEllipse(el)
Draws a JXG.Circle

Parameters:
{JXG.Circle} el
  Reference to a JXG.Circle object that has to be drawn.

See:
  Circle
  JXG.Circle
  JXG.AbstractRenderer#updateEllipse

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

Parameters:
{JXG.Image} el
  Reference to the image object that is to be drawn

See:
  Image
  JXG.Image
  JXG.AbstractRenderer#updateImage

drawInternalText(el)
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:
{JXG.Text} el
  Reference to a JXG.Text object

See:
  Text
  JXG.Text
  JXG.AbstractRenderer#updateInternalText
  JXG.AbstractRenderer#drawText
  JXG.AbstractRenderer#updateText
  JXG.AbstractRenderer#updateTextStyle

drawLine(el)
Draws a line on the JXG.Board.

Parameters:
{JXG.Line} el
  Reference to a line object, that has to be drawn.

See:
  Line
  JXG.Line
  JXG.AbstractRenderer#updateLine

<private> drawNavigationBar(board, attr)
The tiny zoom bar shown on the bottom of a board (if board attribute "showNavigation" is true). It is a div element and gets the CSS class "JXG_navigation" and the id {board id}_navigationbar.

The buttons get the CSS class "JXG_navigation_button" and the id {board_id}_name where name is one of [top, down, left, right, out, 100, in, fullscreen, screenshot, reload, cleartraces].

The symbols for zoom, navigation and reload are hard-coded.

Parameters:
{JXG.Board} board
  Reference to a JSXGraph board.
{Object} attr
  Attributes of the navigation bar

drawPoint(el)
Draws a point on the JXG.Board.

Parameters:
{JXG.Point} el
  Reference to a JXG.Point object that has to be drawn.

See:
  Point
  JXG.Point
  JXG.AbstractRenderer#updatePoint
  JXG.AbstractRenderer#changePointStyle

drawPolygon(el)
Draws a JXG.Polygon on the JXG.Board.

Parameters:
{JXG.Polygon} el
  Reference to a Polygon object, that is to be drawn.

See:
  Polygon
  JXG.Polygon
  JXG.AbstractRenderer#updatePolygon

drawText(el)
Displays a JXG.Text on the JXG.Board by putting a HTML div over it.

Parameters:
{JXG.Text} el
  Reference to an JXG.Text object, that has to be displayed

See:
  Text
  JXG.Text
  JXG.AbstractRenderer#drawInternalText
  JXG.AbstractRenderer#updateText
  JXG.AbstractRenderer#updateInternalText
  JXG.AbstractRenderer#updateTextStyle

drawTicks(el)
Creates a rendering node for ticks added to a line.

Parameters:
{JXG.Line} el
  A arbitrary line.

See:
  Line
  Ticks
  JXG.Line
  JXG.Ticks
  JXG.AbstractRenderer#updateTicks

dumpToCanvas(canvasId, w, h, _ignoreTexts)
Convert SVG construction to canvas. Only available on SVGRenderer.

Parameters:
canvasId
w
h
_ignoreTexts

See:
  JXG.SVGRenderer#dumpToCanvas

dumpToDataURI(_ignoreTexts)
Convert SVG construction to base64 encoded SVG data URL. Only available on SVGRenderer.

Parameters:
_ignoreTexts

See:
  JXG.SVGRenderer#dumpToDataURI

<private> {Object} getArrowHeadData(el, strokewidth, hl)
This method determines some data about the line endings of this element. If there are arrow heads, the offset is determined so that no parts of the line stroke lap over the arrow head.

The returned object also contains the types of the arrow heads.

Parameters:
{JXG.GeometryElement} el
  JSXGraph line or curve element
{Number} strokewidth
  strokewidth of the element
{String} hl
  Ither 'highlight' or empty string

Returns:
  {Object} object containing the data

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

Parameters:
{String} id
  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.

getPositionArrowHead(el, c1, c2, a)
Shorten the length of a line element such that the arrow head touches the start or end point and such that the arrow head ends exactly at the start / end position of the line.

The Coords objects c1 and c2 are changed in place. In object a, the Boolean properties 'showFirst' and 'showLast' are set.

Parameters:
{JXG.Line} el
  Reference to the line object that gets arrow heads.
{JXG.Coords} c1
  Coords of the first point of the line (after JXG.Math.Geometry#calcStraight).
{JXG.Coords} c2
  Coords of the second point of the line (after JXG.Math.Geometry#calcStraight).
{Object} a
  Object { evFirst: Boolean, evLast: Boolean} containing information about arrow heads.

See:
  JXG.AbstractRenderer#getArrowHeadData

handleTouchpoints(el, c1, c2, a)
Handle touchlastpoint / touchfirstpoint

Parameters:
{JXG.GeometryElement} el
{JXG.Coords} c1
  Coordinates of the start of the line. The coordinates are changed in place.
{JXG.Coords} c2
  Coordinates of the end of the line. The coordinates are changed in place.
{Object} a

See:
  JXG.AbstractRenderer#getArrowHeadData

hide(el)
Hides an element on the canvas; Only a stub, requires implementation in the derived renderer. Please use JXG.AbstractRenderer#display instead

Parameters:
{JXG.GeometryElement} el
  Reference to the geometry element that has to disappear.

See:
  JXG.AbstractRenderer#show

hideTouchpoint(i)
Hide a specific crosshair.

Parameters:
{Number} i
  Number of the crosshair to show

{JXG.AbstractRenderer} highlight(el, suppressHighlightStrokeWidth)
Highlights an object, i.e. changes the current colors of the object to its highlighting colors and highlighting strokewidth.

Parameters:
{JXG.GeometryElement} el
  Reference of the object that will be highlighted.
{Boolean} suppressHighlightStrokeWidth Optional, Default: undefined
  If undefined or false, highlighting also changes strokeWidth. This might not be the cases for polygon borders. Thus, if a polygon is highlighted, its polygon borders change strokeWidth only if the polygon attribute highlightByStrokeWidth == true.

Returns:
  {JXG.AbstractRenderer} Reference to the renderer

See:
  JXG.AbstractRenderer#updateTextStyle

{Array} joinTransforms(el, transformations)
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:
{JXG.GeometryElement} el
  A JSXGraph element. We only need its board property.
{Array} transformations
  An array of JXG.Transformations.

Returns:
  {Array} A matrix represented by a two dimensional array of numbers.

See:
  JXG.AbstractRenderer#transformRect

makeArrows(el, arrowData)
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:
{JXG.GeometryElement} el
  The element the arrows are to be attached to.
{Object} arrowData
  Data concerning possible arrow heads

{JXG.AbstractRenderer} noHighlight(el)
Uses the normal colors of an object, i.e. the opposite of JXG.AbstractRenderer#highlight.

Parameters:
{JXG.GeometryElement} el
  Reference of the object that will get its normal colors.

Returns:
  {JXG.AbstractRenderer} Reference to the renderer

See:
  JXG.AbstractRenderer#updateTextStyle

remove(node)
Removes an element node. Just a stub.

Parameters:
{Node} node
  The node to remove.

removeDraft(el)
Puts an object from draft mode back into normal mode.

Parameters:
{JXG.GeometryElement} el
  Reference of the object that no longer is in draft mode.

{Function} removeToInsertLater(el)
Remove an element and provide a function that inserts it into its original position. This method is taken from this article https://developers.google.com/speed/articles/javascript-dom.
Author: KeeKim Heng, Google Web Developer.

Parameters:
{Element} el
  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:
{Number} w
  New width
{Number} h
  New height

screenshot(board)
Display SVG image in html img-tag which enables easy download for the user. See JXG.SVGRenderer#screenshot

Parameters:
board

setARIA(el)
Set ARIA related properties of an element. The attribute "aria" of an element contains at least the properties "enabled", "label", and "live". Additionally, all available properties from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA may be set.

In JSXGraph, the available properties are used without the leading 'aria-'. For example, the value of the JSXGraph attribute 'aria.label' will be set to the HTML attribute 'aria-label'.

Parameters:
{JXG.GeometryElement} el
  Reference of the object that wants new ARIA attributes.

<private> {JXG.AbstractRenderer} setArrowSize(el, arrowData)
Set the arrow head size.

Parameters:
{JXG.GeometryElement} el
  Reference to a line or curve object that has to be drawn.
{Object} arrowData
  Data concerning possible arrow heads

Returns:
  {JXG.AbstractRenderer} Reference to the renderer

See:
  Line
  JXG.Line
  Curve
  JXG.Curve
  JXG.AbstractRenderer#updatePathWithArrowHeads
  JXG.AbstractRenderer#getArrowHeadData

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:
{Node} node
  The SVG DOM Node which buffering type to update.
{String} type
  Either 'auto', 'dynamic', or 'static'. For an explanation see https://www.w3.org/TR/SVGTiny12/painting.html#BufferedRenderingProperty.

setCssClass(el, cssClass)
Sets CSS classes for elements (relevant for SVG only).

Parameters:
{JXG.GeometryElement} el
  Reference of the object that wants a new set of CSS classes.
{String} cssClass
  String containing a space separated list of CSS classes.

setDashStyle(el)
Sets an element's dash style.

Parameters:
{JXG.GeometryElement} el
  An JSXGraph element.

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

Parameters:
{JXG.GeometryElement} el
  Reference of the object that is in draft mode.

setGradient(el)
Sets up nodes for rendering a gradient fill.

Parameters:
{JXG.GeometryElement} el
  Reference of the object which gets the gradient

<private> setLayer(el, value)
Move element into new layer. This is trivial for canvas, but needs more effort in SVG. Does not work dynamically, i.e. if level is a function.

Parameters:
{JXG.GeometryElement} el
  Element which is put into different layer
{Number} value
  Layer number

setLineCap(element)
Update the line endings (linecap) of a straight line from its attribute 'linecap'. Possible values for the attribute 'linecap' are: 'butt', 'round', 'square'. The default value is 'butt'. Not available for VML renderer.

Parameters:
{JXG.Line} element
  A arbitrary line.

See:
  Line
  JXG.Line
  JXG.AbstractRenderer#updateLine

setObjectFillColor(el, color, opacity)
Sets an objects fill color.

Parameters:
{JXG.GeometryElement} el
  Reference of the object that wants a new fill color.
{String} color
  Color in a HTML/CSS compatible format. If you don't want any fill color at all, choose 'none'.
{Number} opacity
  Opacity of the fill color. Must be between 0 and 1.

setObjectStrokeColor(el, color, opacity)
Changes an objects stroke color to the given color.

Parameters:
{JXG.GeometryElement} el
  Reference of the JXG.GeometryElement that gets a new stroke color.
{String} color
  Color value in a HTML compatible format, e.g. #00ff00 or green for green.
{Number} opacity
  Opacity of the fill color. Must be between 0 and 1.

setObjectStrokeWidth(el, width)
Sets an element's stroke width.

Parameters:
{JXG.GeometryElement} el
  Reference to the geometry element.
{Number} width
  The new stroke width to be assigned to the element.

setObjectTransition(el, duration)
Sets the transition duration (in milliseconds) for fill color and stroke color and opacity.

Parameters:
{JXG.GeometryElement} el
  Reference of the object that wants a new transition duration.
{Number} duration
  (Optional) duration in milliseconds. If not given, element.visProp.transitionDuration is taken. This is the default.

setPropertyPrim(node, key, val)
Sets a node's attribute.

Parameters:
{Node} node
  The node that is to be updated.
{String} key
  Name of the attribute.
{String} val
  New value for the attribute.

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

Parameters:
{JXG.GeometryElement} el
  Reference to a geometry object, that should get a shadow

setTabindex(el)
Set the attribute `tabindex` to the attribute `tabindex` of an element. This is only relevant for the SVG renderer.

Parameters:
{JXG.GeometryElement} el

show(el)
Shows a hidden element on the canvas; Only a stub, requires implementation in the derived renderer. Please use JXG.AbstractRenderer#display instead

Parameters:
{JXG.GeometryElement} el
  Reference to the object that has to appear.

See:
  JXG.AbstractRenderer#hide

showTouchpoint(i)
Show a specific crosshair.

Parameters:
{Number} i
  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:
  JXG.AbstractRenderer#unsuspendRedraw

transformRect(el, transformations)
Applies transformations on images and text elements. This method has to implemented in all descendant classes where text and image transformations are to be supported.

Only affine transformation are supported, no proper projective transformations. This means, the respective entries of the transformation matrix are simply ignored.

Parameters:
{JXG.Image|JXG.Text} el
  A JXG.Image or JXG.Text object.
{Array} transformations
  An array of 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:
  JXG.AbstractRenderer#suspendRedraw

updateCurve(el)
Updates visual appearance of the renderer element assigned to the given JXG.Curve.

Parameters:
{JXG.Curve} el
  Reference to a JXG.Curve object, that has to be updated.

See:
  Curve
  JXG.Curve
  JXG.AbstractRenderer#drawCurve

updateEllipse(el)
Updates visual appearance of a given JXG.Circle on the JXG.Board.

Parameters:
{JXG.Circle} el
  Reference to a JXG.Circle object, that has to be updated.

See:
  Circle
  JXG.Circle
  JXG.AbstractRenderer#drawEllipse

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.
{Number} x
  Centre X coordinate
{Number} y
  Centre Y coordinate
{Number} rx
  The x-axis radius.
{Number} ry
  The y-axis radius.

updateGradient(el)
Updates the gradient fill.

Parameters:
{JXG.GeometryElement} el
  An JSXGraph element with an area that can be filled.

updateImage(el)
Updates the properties of an JXG.Image element.

Parameters:
{JXG.Image} el
  Reference to an JXG.Image object, that has to be updated.

See:
  Image
  JXG.Image
  JXG.AbstractRenderer#drawImage

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:
{JXG.Text} el
  Reference to the JXG.Image object, that has to be updated.
{Boolean} doHighlight

See:
  Image
  JXG.Image
  JXG.AbstractRenderer#highlight
  JXG.AbstractRenderer#noHighlight

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

Parameters:
{JXG.Image} el
  Reference to an image object.

See:
  JXG.AbstractRenderer#updateImage

updateInternalText(el)
Updates visual properties of an already existing JXG.Text element.

Parameters:
{JXG.Text} el
  Reference to an JXG.Text object, that has to be updated.

See:
  Text
  JXG.Text
  JXG.AbstractRenderer#drawInternalText
  JXG.AbstractRenderer#drawText
  JXG.AbstractRenderer#updateText
  JXG.AbstractRenderer#updateTextStyle

<private> updateInternalTextStyle(el, strokeColor, strokeOpacity)
Set color and opacity of internal texts. This method is used for Canvas and VML. SVG needs its own version.

Parameters:
el
strokeColor
strokeOpacity

See:
  JXG.AbstractRenderer#updateTextStyle
  JXG.SVGRenderer#updateInternalTextStyle

updateLine(el)
Updates visual appearance of the renderer element assigned to the given JXG.Line.

Parameters:
{JXG.Line} el
  Reference to the JXG.Line object that has to be updated.

See:
  Line
  JXG.Line
  JXG.AbstractRenderer#drawLine

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.
{Number} p1x
  The first point's x coordinate.
{Number} p1y
  The first point's y coordinate.
{Number} p2x
  The second point's x coordinate.
{Number} p2y
  The second point's y coordinate.
{JXG.Board} board

<private> {JXG.AbstractRenderer} updateLineWithEndings(el, arrowData)
Corrects the line length if there are arrow heads, such that the arrow ends exactly at the intended position. Calls the renderer method to draw the line.

Parameters:
{JXG.Line} el
  Reference to a line object, that has to be drawn
{Object} arrowData
  Data concerning possible arrow heads

Returns:
  {JXG.AbstractRenderer} Reference to the renderer

See:
  Line
  JXG.Line
  JXG.AbstractRenderer#updateLine
  JXG.AbstractRenderer#getPositionArrowHead

<private> {JXG.AbstractRenderer} updatePath(el)
Calls the renderer method to draw a curve.

Parameters:
{JXG.GeometryElement} el
  Reference to a line object, that has to be drawn.

Returns:
  {JXG.AbstractRenderer} Reference to the renderer

See:
  Curve
  JXG.Curve
  JXG.AbstractRenderer#updateCurve

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.
{String} pathString
  A string formatted like e.g. 'M 1,2 L 3,1 L5,5'. The format of the string depends on the rendering engine.
{JXG.Board} board
  Reference to the element's board.

updatePathStringBezierPrim(el)
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:
{JXG.GeometryElement} el

updatePathStringPoint(el, 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:
{JXG.Point} el
  The point element
{Number} size
  A positive number describing the size. Usually the half of the width and height of the drawn point.
{String} type
  A string describing the point's face. This method only accepts the shortcut version of each possible face: `x, +, |, -, [], <>, <<>>,^, v, >, <`

updatePathStringPrim(el)
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:
{JXG.GeometryElement} el

<private> updatePathWithArrowHeads(el, doHighlight)
Handles arrow heads of a line or curve element and calls the renderer primitive.

Parameters:
{JXG.GeometryElement} el
  Reference to a line or curve object that has to be drawn.
{Boolean} doHighlight

See:
  Line
  JXG.Line
  Curve
  JXG.Curve
  JXG.AbstractRenderer#updateLine
  JXG.AbstractRenderer#updateCurve
  JXG.AbstractRenderer#makeArrows
  JXG.AbstractRenderer#getArrowHeadData

updatePoint(el)
Updates visual appearance of the renderer element assigned to the given JXG.Point.

Parameters:
{JXG.Point} el
  Reference to a JXG.Point object, that has to be updated.

See:
  Point
  JXG.Point
  JXG.AbstractRenderer#drawPoint
  JXG.AbstractRenderer#changePointStyle

updatePolygon(el)
Updates properties of a JXG.Polygon's rendering node.

Parameters:
{JXG.Polygon} el
  Reference to a JXG.Polygon object, that has to be updated.

See:
  Polygon
  JXG.Polygon
  JXG.AbstractRenderer#drawPolygon

updatePolygonPrim(node, el)
Update a polygon primitive.

Parameters:
{Node} node
{JXG.Polygon} el
  A JSXGraph element of type 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.
{Number} x
  x coordinate of the top left vertex.
{Number} y
  y coordinate of the top left vertex.
{Number} w
  Width of the rectangle.
{Number} h
  The rectangle's height.

updateText(el)
Updates visual properties of an already existing JXG.Text element.

Parameters:
{JXG.Text} el
  Reference to an JXG.Text object, that has to be updated.

See:
  Text
  JXG.Text
  JXG.AbstractRenderer#drawText
  JXG.AbstractRenderer#drawInternalText
  JXG.AbstractRenderer#updateInternalText
  JXG.AbstractRenderer#updateTextStyle

updateTextStyle(el, 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:
{JXG.Text} el
  Reference to the JXG.Text object, that has to be updated.
{Boolean} doHighlight

See:
  Text
  JXG.Text
  JXG.AbstractRenderer#drawText
  JXG.AbstractRenderer#drawInternalText
  JXG.AbstractRenderer#updateText
  JXG.AbstractRenderer#updateInternalText
  JXG.AbstractRenderer#updateInternalTextStyle

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

Parameters:
{JXG.Ticks} el
  Reference of a ticks object that has to be updated.

See:
  Line
  Ticks
  JXG.Line
  JXG.Ticks
  JXG.AbstractRenderer#drawTicks

updateTouchpoint(i, pos)
Move a specific crosshair.

Parameters:
{Number} i
  Number of the crosshair to show
{Array} pos
  New positon in screen coordinates

Documentation generated by JsDoc Toolkit 2.4.0 on Fri Apr 04 2025 09:22:40 GMT+0200 (Mitteleuropäische Sommerzeit)