# JSXGraph 1.7.0 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

Classes

- _global_
- Angle
- Arc
- Arrow
- Arrowparallel
- Axis
- Bisector
- Bisectorlines
- Boxplot
- Button
- Cardinalspline
- Chart
- Checkbox
- Circle
- Circumcenter
- Circumcircle
- CircumcircleArc
- CircumcircleSector
- Comb
- Conic
- Curve
- Curve3D
- CurveDifference
- CurveIntersection
- CurveUnion
- Derivative
- Ellipse
- ForeignObject
- Functiongraph
- Functiongraph3D
- Glider
- Grid
- Group
- Hatch
- Hyperbola
- Image
- ImplicitCurve
- Incenter
- Incircle
- Inequality
- Input
- Integral
- Intersection
- JXG
- JXG.AbstractRenderer
- JXG.Board
- JXG.Board.infobox
- JXG.C
- JXG.CA
- JXG.CanvasRenderer
- JXG.Chart
- JXG.Circle
- JXG.Complex
- JXG.Composition
- JXG.Coords
- JXG.CoordsElement
- JXG.Curve
- JXG.Curve3D
- JXG.Dump
- JXG.EventEmitter
- JXG.Expect
- 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.Math.Symbolic
- JXG.NoRenderer
- JXG.Options
- JXG.Plane3D
- JXG.Point
- JXG.Point3D
- JXG.Polygon
- JXG.PrefixParser
- JXG.Server
- JXG.Server.modules
- JXG.Surface3D
- JXG.SVGRenderer
- JXG.Text
- JXG.Ticks
- JXG.Transformation
- JXG.Turtle
- JXG.Util
- JXG.Util.Base64
- JXG.Util.Unzip
- JXG.Util.UTF8
- JXG.View3D
- JXG.VMLRenderer
- JXG.XML
- Label
- Legend
- Line
- Line3D
- Locus
- MajorArc
- MajorSector
- Measurement
- Metapostspline
- Midpoint
- MinorArc
- MinorSector
- mirrorelement
- Mirrorpoint
- NonReflexAngle
- Normal
- Orthogonalprojection
- OtherIntersection
- Parabola
- Parallel
- Parallelogram
- Parallelpoint
- ParametricSurface3D
- Perpendicular
- PerpendicularPoint
- PerpendicularSegment
- Point
- Point3D
- PolarLine
- PolePoint
- Polygon
- PolygonalChain
- RadicalAxis
- Reflection
- ReflexAngle
- RegularPolygon
- Riemannsum
- Sector
- Segment
- Semicircle
- Slider
- Slopefield
- Slopetriangle
- Smartlabel
- Spline
- Stepfunction
- Tangent
- Tapemeasure
- Text
- Ticks
- Tracecurve
- Transformation
- Turtle
- Vectorfield
- Vectorfield3D
- View3D

# Class JXG.CanvasRenderer

JXG.AbstractRenderer
↳ JXG.CanvasRenderer

JXG.CanvasRenderer
Defined in: canvas.js.
Extends JXG.AbstractRenderer.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| JXG.CanvasRenderer(container, dim) Uses HTML Canvas to implement the rendering methods defined in JXG.AbstractRenderer.

Fields borrowed from class JXG.AbstractRenderer:
  container, dashArray, enhancedRendering, supportsForeignObject, type, vOffsetText

Fields borrowed from class JXG.AbstractRenderer:
  container, dashArray, enhancedRendering, supportsForeignObject, type, vOffsetText

Method Summary
Method Attributes | Method Name and Description
--- | ---
<private> | _drawPolygon(shape, degree, doFill) Draws a filled polygon.
<private> | _fill(el) Sets the fill color and fills an area.
<private> | _rotatePoint(angle, x, y) Rotates a point around `(0, 0)` by a given angle.
<private> | _rotateShape(shape, angle) Rotates an array of points around `(0, 0)`.
<private> | _setColor(el, type, targetType) Sets color and opacity for filling and stroking.
<private> | _stroke(el) Sets color and opacity for drawing paths and lines and draws the paths and lines.
<private> | _translateShape(shape, x, y) Translates a set of points.
<private> | drawArrows(el, scr1, scr2, hl, a) Draws arrows of an element (usually a line) in canvas renderer.
<private> | updateGradientAngle(node, radians) Set the gradient angle for linear color gradients.
<private> | updateGradientCircle(node, cx, cy, r, fx, fy, fr) Set circles for radial color gradients.

Methods borrowed from class JXG.AbstractRenderer:
  _css2js, _getHighlighted, _setArrowWidth, _updateVisual, appendChildPrim, appendNodesToElement, changePointStyle, createPrim, createTouchpoints, display, displayCopyright, drawCurve, drawEllipse, drawImage, drawInternalText, drawLine, drawNavigationBar, drawPoint, drawPolygon, drawText, drawTicks, dumpToCanvas, dumpToDataURI, getArrowHeadData, getElementById, getPositionArrowHead, handleTouchpoints, hide, hideTouchpoint, highlight, joinTransforms, makeArrows, noHighlight, remove, removeDraft, removeToInsertLater, resize, screenshot, setArrowSize, setBuffering, setDashStyle, setDraft, setGradient, setLayer, setLineCap, setObjectFillColor, setObjectStrokeColor, setObjectStrokeWidth, setObjectTransition, setObjectViewport, setPropertyPrim, setShadow, show, showTouchpoint, suspendRedraw, transformImage, unsuspendRedraw, updateCurve, updateEllipse, updateEllipsePrim, updateGradient, updateImage, updateImageStyle, updateImageURL, updateInternalText, updateInternalTextStyle, updateLine, updateLinePrim, updateLineWithEndings, updatePath, updatePathPrim, updatePathStringBezierPrim, updatePathStringPoint, updatePathStringPrim, updatePathWithArrowHeads, updatePoint, updatePolygon, updatePolygonPrim, updateRectPrim, updateText, updateTextStyle, updateTicks, updateTouchpoint

Class Detail
JXG.CanvasRenderer(container, dim)
Uses HTML Canvas to implement the rendering methods defined in JXG.AbstractRenderer.

Parameters:
{Node} container
  Reference to a DOM node containing the board.
{Object} dim
  The dimensions of the board
{Number} dim.width
{Number} dim.height

See:
  JXG.AbstractRenderer

Method Detail
<private> _drawPolygon(shape, degree, doFill)
Draws a filled polygon.

Parameters:
{Array} shape
  A matrix presented by a two dimensional array of numbers.
degree
doFill

See:
  JXG.AbstractRenderer#drawArrows

<private> _fill(el)
Sets the fill color and fills an area.

Parameters:
{JXG.GeometryElement} el
  An arbitrary JSXGraph element, preferably one with an area.

<private> {Array} _rotatePoint(angle, x, y)
Rotates a point around `(0, 0)` by a given angle.

Parameters:
{Number} angle
  An angle, given in rad.
{Number} x
  X coordinate of the point.
{Number} y
  Y coordinate of the point.

Returns:
  {Array} An array containing the x and y coordinate of the rotated point.

<private> {Array} _rotateShape(shape, angle)
Rotates an array of points around `(0, 0)`.

Parameters:
{Array} shape
  An array of array of point coordinates.
{Number} angle
  The angle in rad the points are rotated by.

Returns:
  {Array} Array of array of two dimensional point coordinates.

<private> {Boolean} _setColor(el, type, targetType)
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:
{JXG.GeometryElement} el
  Any JSXGraph element.
{String} type Optional, Default: 'stroke'
  Either fill or stroke.
{String} targetType Optional, Default: type
  (optional) Either fill or stroke.

Returns:
  {Boolean} If the color could be set, `true` is returned.

<private> _stroke(el)
Sets color and opacity for drawing paths and lines and draws the paths and lines.

Parameters:
{JXG.GeometryElement} el
  An JSXGraph element with a stroke.

<private> {Array} _translateShape(shape, x, y)
Translates a set of points.

Parameters:
{Array} shape
  An array of point coordinates.
{Number} x
  Translation in X direction.
{Number} y
  Translation in Y direction.

Returns:
  {Array} An array of translated point coordinates.

<private> drawArrows(el, scr1, scr2, hl, a)
Draws arrows of an element (usually a line) in canvas renderer.

Parameters:
{JXG.GeometryElement} el
  Line to be drawn.
{Array} scr1
  Screen coordinates of the start position of the line or curve.
{Array} scr2
  Screen coordinates of the end position of the line or curve.
{String} hl
  String which carries information if the element is highlighted. Used for getting the correct attribute.
a

<private> updateGradientAngle(node, radians)
Set the gradient angle for linear color gradients.

Parameters:
{JXG.GeometryElement} node
  An arbitrary JSXGraph element, preferably one with an area.
{Number} radians
  angle value in radians. 0 is horizontal from left to right, Pi/4 is vertical from top to bottom.

<private> updateGradientCircle(node, cx, cy, r, fx, fy, fr)
Set circles for radial color gradients.

Parameters:
{SVGnode} node
  SVG gradient node
{Number} cx
  Canvas value x1 (but value between 0 and 1)
{Number} cy
  Canvas value y1 (but value between 0 and 1)
{Number} r
  Canvas value r1 (but value between 0 and 1)
{Number} fx
  Canvas value x0 (but value between 0 and 1)
{Number} fy
  Canvas value x1 (but value between 0 and 1)
{Number} fr
  Canvas value r0 (but value between 0 and 1)

Documentation generated by JsDoc Toolkit 2.4.0 on Wed Feb 14 2024 15:53:28 GMT+0100 (heure normale d’Europe centrale)