# 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.Image

JXG.GeometryElement,JXG.CoordsElement
↳ JXG.Image

Creates a new image object. Do not use this constructor to create a image. Use JXG.Board#create with type Image instead.
Defined in: image.js.
Extends JXG.CoordsElement, JXG.GeometryElement.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| JXG.Image(board, coordinates, attributes, url, size) Construct and handle images The image can be supplied as an URL or an base64 encoded inline image like "data:image/png;base64, /9j/4AAQSkZJRgA.

Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, aria, baseElement, board, childElements, cssClass, dash, dashScale, descendants, draft, dragToTopOfLayer, dump, element3D, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlightCssClass, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isLabel, isReal, lastDragTime, layer, lineCap, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, nonnegativeOnly, notExistingParents, numTraces, parents, precision, priv, quadraticform, rendNode, rotatable, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, transitionProperties, type, visible, visProp, visPropCalc, withLabel
Fields borrowed from class JXG.CoordsElement:
  coords, groups, isConstrained, needsUpdateFromParent, onPolygon, position, slideObject, slideObjects

Field Summary
Field Attributes | Field Name and Description
--- | ---
| size Array of length two containing [width, height] of the image in pixel.
| url 'href' of the image.

Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, aria, baseElement, board, childElements, cssClass, dash, dashScale, descendants, draft, dragToTopOfLayer, dump, element3D, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlightCssClass, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isLabel, isReal, lastDragTime, layer, lineCap, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, nonnegativeOnly, notExistingParents, numTraces, parents, precision, priv, quadraticform, rendNode, rotatable, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, transitionProperties, type, visible, visProp, visPropCalc, withLabel
Fields borrowed from class JXG.CoordsElement:
  coords, groups, isConstrained, needsUpdateFromParent, onPolygon, position, slideObject, slideObjects

Method Summary
Method Attributes | Method Name and Description
--- | ---
| H() Returns the height of the image in user coordinates.
| hasPoint(x, y) Checks whether (x,y) is over or near the image;
| setSize(width, height) Set the width and height of the image.
<private> | update(fromParent) Recalculate the coordinates of lower left corner and the width and height.
<private> | updateRenderer() Send an update request to the renderer.
<private> | updateSize() Updates the internal arrays containing size of the image.
<private> | updateSpan() Update the anchor point of the image, i.e.
| W() Returns the width of the image in user coordinates.

Methods borrowed from class JXG.GeometryElement:
  _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
Methods borrowed from class JXG.CoordsElement:
  _anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveAlongES6, moveTo, moveToES6, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, visitES6, X, XEval, Y, YEval, Z, ZEval

Events borrowed from class JXG.GeometryElement:
  attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up

Class Detail
JXG.Image(board, coordinates, attributes, url, size)
Construct and handle images The image can be supplied as an URL or an base64 encoded inline image like "data:image/png;base64, /9j/4AAQSkZJRgA..." or a function returning an URL: function(){ return 'xxx.png; }.

Parameters:
{string|JXG.Board} board
  The board the new image is drawn on.
{Array} coordinates
  An array with the user coordinates of the image.
{Object} attributes
  An object containing visual and - optionally - a name and an id.
{string|function} url
  An URL string or a function returning an URL string.
{Array} size
  Array containing width and height of the image in user coordinates.

Field Detail
{array} size
Array of length two containing [width, height] of the image in pixel.

{string} url
'href' of the image. This might be an URL, but also a data-uri is allowed.
Method Detail
{number} H()
Returns the height of the image in user coordinates.

Returns:
  {number} height of the image in user coordinates

{Boolean} hasPoint(x, y)
Checks whether (x,y) is over or near the image;

Parameters:
{Number} x
  Coordinate in x direction, screen coordinates.
{Number} y
  Coordinate in y direction, screen coordinates.

Returns:
  {Boolean} True if (x,y) is over the image, False otherwise.

{JXG.GeometryElement} setSize(width, height)
Set the width and height of the image. After setting a new size, board.update() or image.fullUpdate() has to be called to make the change visible.

Parameters:
{number|function|string} width
  Number, function or string that determines the new width of the image
{number|function|string} height
  Number, function or string that determines the new height of the image

Returns:
  {JXG.GeometryElement} A reference to the element

Examples:

    var im = board.create('image', ['https://jsxgraph.org/distrib/images/uccellino.jpg',
                                   [-3,-2], [3,3]]);
    im.setSize(4, 4);
    board.update();

    var p0 = board.create('point', [-3, -2]),
        im = board.create('image', ['https://jsxgraph.org/distrib/images/uccellino.jpg',
                        [function(){ return p0.X(); }, function(){ return p0.Y(); }],
                        [3,3]]),
        p1 = board.create('point', [1, 2]);

    im.setSize(function(){ return p1.X() - p0.X(); }, function(){ return p1.Y() - p0.Y(); });
    board.update();

<private> {JXG.GeometryElement} update(fromParent)
Recalculate the coordinates of lower left corner and the width and height.

Parameters:
fromParent

Returns:
  {JXG.GeometryElement} A reference to the element

<private> updateRenderer()
Send an update request to the renderer.

<private> {JXG.GeometryElement} updateSize()
Updates the internal arrays containing size of the image.

Returns:
  {JXG.GeometryElement} A reference to the element

<private> {JXG.GeometryElement} updateSpan()
Update the anchor point of the image, i.e. the lower left corner and the two vectors which span the rectangle.

Returns:
  {JXG.GeometryElement} A reference to the element

{number} W()
Returns the width of the image in user coordinates.

Returns:
  {number} width of the image in user coordinates

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