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

↳ JXG.Board

JXG.Board controls all properties and methods used to manage a geonext board like managing geometric elements, managing mouse and touch events, etc. You probably don't want to use this constructor directly. Please use JXG.JSXGraph.initBoard to initialize a board.
Defined in: board.js.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| JXG.Board(container, renderer, id, origin, zoomX, zoomY, unitX, unitY, canvasWidth, canvasHeight, attributes) Constructs a new Board object.

Attributes Summary
Field Attributes | Field Name and Description
--- | ---
| animationDelay Time (in msec) between two animation steps.
| axis Show default axis.
| boundingBox Bounding box of the visible area in user coordinates.
| browserPan Enable browser scrolling on touch interfaces if the user double taps into an empty region of the board.
| clickDelay Maximum time delay (in msec) between two clicks to be considered as double click.
| dblClickSuppressClick If false (default), JSXGraph follows the JavaScript standard and fires before a dblclick event two click events.
| defaultAxes Attributes for the default axes in case of the attribute axis:true in JXG.JSXGraph#initBoard.
| document Supply the document object.
| drag Control the possibilities for dragging objects.
| fullscreen Attribute(s) to control the fullscreen icon.
| ignoreLabels If set true and hasPoint() is true for both an element and it's label, the element (and not the label) is taken as drag element.
| intl Support for internationalization of number formatting.
| keepAspectRatio If set to true, the ratio between horizontal and vertical unit sizes stays constant - independent of size changes of the hosting HTML div element.
| keyboard Control using the keyboard to change the construction.
| logging If enabled, user activities are logged in array "board.userLog".
| maxBoundingBox Maximal bounding box of the visible area in user coordinates.
| maxFrameRate Maximum frame rate of the board, i.e.
| maxNameLength Maximum number of digits in automatic label generation.
| minimizeReflow Change redraw strategy in SVG rendering engine.
| moveTarget Element which listens to move events of the pointing device.
| offsetX A number that will be added to the absolute position of the board used in mouse coordinate calculations in JXG.Board#getCoordsTopLeftCorner.
| offsetY A number that will be added to the absolute position of the board used in mouse coordinate calculations in JXG.Board#getCoordsTopLeftCorner.
| pan Control the possibilities for panning interaction (i.e.
<static> | JXG.Board.registerEvents Allow user interaction by registering pointer events (including mouse and touch events), fullscreen, keyboard, resize, and zoom events.
| renderer Default rendering engine.
| resize Control if JSXGraph reacts to resizing of the JSXGraph container element by the user / browser.
| screenshot Attributes to control the screenshot function.
| selection Control the possibilities for a selection rectangle.
| showClearTraces Show a button which allows to clear all traces of a board.
| showCopyright Show copyright string in canvas.
| showFullscreen Show a button in the navigation bar to start fullscreen mode.
| showInfobox If true, the infobox is shown on mouse/pen over for all points which have set their attribute showInfobox to 'inherit'.
| showNavigation Display of navigation arrows and zoom buttons in the navigation bar.
| showReload Show a button in the navigation bar to force reload of a construction.
| showScreenshot Show a button in the navigation bar to enable screenshots.
| showZoom Display of zoom buttons in the navigation bar.
| takeFirst If true the first element of the set JXG.board.objects having hasPoint==true is taken as drag element.
| takeSizeFromFile If true, when read from a file or string - the size of the div can be changed by the construction text.
| theme Set a visual theme for a board.
| title Title string for the board.
| zoom Control the possibilities for zoom interaction.
| zoomX Zoom factor in horizontal direction.
| zoomY Zoom factor in vertical direction.

Field Summary
Field Attributes | Field Name and Description
--- | ---
<private> | _board_touches Keeps a list of pointer devices which are currently touching the screen.
<private> | _change3DView A flag which tells us if the update is triggered by a change of the 3D view.
<private> | _drag_offset Offset for large coords elements like images
<private> | _inputDevice Stores the input device used in the last down or move event.
<private> | _isResizing A flag which tells us if a resize is in process
<private> | _isScrolling A flag which tells us if the user is scrolling the viewport
| addEvent Alias of JXG.Board.on.
| animationObjects Stores all the objects that are currently running an animation.
| attr Board attributes
<constant> | BOARD_MODE_DRAG Board is in drag mode, objects aren't highlighted on mouse over and the object referenced in JXG.Board#mouse is updated on mouse movement.
<constant> | BOARD_MODE_MOVE_ORIGIN In this mode a mouse move changes the origin's screen coordinates.
<constant> | BOARD_MODE_NONE Board is in no special mode, objects are highlighted on mouse over and objects may be clicked to start drag&drop.
<constant> | BOARD_MODE_ZOOM Update is made with high quality, e.g.
<constant> | BOARD_QUALITY_HIGH Update is made with high quality, e.g.
<constant> | BOARD_QUALITY_LOW Update is made with low quality, e.g.
<private> | canvasHeight Canvas Height
<private> | canvasWidth Canvas width.
| container The html-id of the html element containing the board.
| containerObj Pointer to the html element containing the board.
| cPos Cached result of getCoordsTopLeftCorner for touch/mouseMove-Events to save some DOM operations.
| currentCBDef The current color blindness deficiency is stored in this property.
| dependentBoards An array containing all other boards that are updated after this board has been updated.
| dimension Dimension of the board.
| downObjects Collects all elements that triggered a mouse down event.
| drag_dx The distance from the mouse to the dragged object in x direction when the user clicked the mouse button.
| drag_dy The distance from the mouse to the dragged object in y direction when the user clicked the mouse button.
| drag_position The last position where a drag event has been fired.
| elementsByName An associative array / dictionary to store the objects of the board by name.
| focusObjects Collects all elements that have keyboard focus.
| geonextCompatibilityMode If GEONExT constructions are displayed, then this property should be set to true.
<private> | grids Grids keeps track of all grids attached to this board.
| groups An associative array containing all groups belonging to the board.
| hasMouseHandlers A flag which tells if the board registers mouse events.
| hasMouseUp A flag which tells if the board the JXG.Board#mouseUpListener is currently registered.
| hasPointerHandlers A flag which stores if the board registered pointer events.
| hasPointerUp A flag which tells us if the board has a pointerUp event registered at the moment.
| hasTouchEnd A flag which tells if the board the JXG.Board#touchEndListener is currently registered.
| hasTouchHandlers A flag which tells if the board registers touch events.
| hasWheelHandlers A flag which stores if the board registered zoom events, i.e.
| highlightedObjects An associative array containing all highlighted elements belonging to the board.
| id ID of the board
| inUpdate During the update process this is set to false to prevent an endless loop.
| isSelecting A flag which tells us if the user is selecting
| isSuspendedRedraw If true updates are skipped.
<private> | keepaspectratio Keep aspect ratio if bounding box is set and the width/height ratio differs from the width/height ratio of the canvas.
| mode The board mode the board is currently in.
| mouse References to the object that is dragged with the mouse on the board.
| needsFullUpdate Full updates are needed after zoom and axis translates.
| numObjects Number of objects ever created on this board.
| objects An associative array containing all geometric objects belonging to the board.
| objectsList An array containing all geometric objects on the board in the order of construction.
| options Copy of the default options
<private> | origin Coordinates of the boards origin.
| positionAccessLast Contains the last time (epoch, msec) since the last getCoordsTopLeftCorner call which was not thrown away.
| reducedUpdate If reducedUpdate is set to true then only the dragged element and few (e.g.
| removeEvent Alias of JXG.Board.off.
| resizeHandlers Array containing the events related to resizing that have event listeners.
| selectingBox A bounding box for the selection
| selectingMode A flag which tells us if the board is in the selecting mode
| touches Keeps track on touched elements, like JXG.Board#mouse does for mouse events.
| touchMoveLast Contains the last time (epoch, msec) since the last touchMove event which was not thrown away or since touchStart because Android's Webkit browser fires too much of them.
| touchMoveLastId Contains the pointerId of the last touchMove event which was not thrown away or since touchStart because Android's Webkit browser fires too much of them.
<private> | unitX The number of pixels which represent one unit in user-coordinates in x direction.
<private> | unitY The number of pixels which represent one unit in user-coordinates in y direction.
| updateQuality The update quality of the board.
| userLog Array to log user activity.
| xmlString A string containing the XML text of the construction.

Method Summary
Method Attributes | Method Name and Description
--- | ---
<private> | _createSelectionPolygon(attr) Create the internal selection polygon, which will be available as board.selectionPolygon.
<private> | _getPointerInputDevice(evt) Determine which input device is used for this action.
<private> | _handleClicks(evt, evtArray) Internal handling of click events for pointers and mouse.
<private> | _handleDblClicks(evt, evtArray) Internal handling of dblclick events for pointers and mouse.
<private> | _isPointerRegistered(evt) Check if pointer event is already registered in JXG.Board#_board_touches.
<private> | _isRequiredKeyPressed(evt, action) Test if the required key combination is pressed for wheel zoom, move origin and selection
<private> | _moveSelecting(pos) Update the selection rectangle during a move event.
<private> | _pointerClearTouches(pId) Remove all registered fingers from JXG.Board#_board_touches.
<private> | _pointerRemoveTouches(evt) Deregisters a pointer event in JXG.Board#_board_touches.
<private> | _pointerStorePosition(evt) Store the position of a pointer event.
<private> | _removeObj(object, saveMethod) Inner, recursive method of removeObject.
<private> | _set(key, value) Sets the value of attribute `key` to `value`.
<private> | _setSelectionPolygonFromBox() Update the Selection rectangle.
<private> | _startSelecting(pos) Start the selection of a region.
<private> | _stopSelecting(evt) Update the selection rectangle during an up event.
<private> | _testForSelection(evt) Test if a down event should start a selection.
| addAnimation(element) Adds an animation.
| addChild(board) Adds a dependent board to this board.
| addConditions(str) Add conditional updates to the elements.
| addEventHandlers() Add all possible event handlers to the board object that move objects, i.e.
| addFullscreenEventHandlers() Add fullscreen events which update the CSS transformation matrix to correct the mouse/touch/pointer positions in case of CSS transformations.
| addGrid() Adds a grid to the board according to the settings given in board.options.
| addHook(hook, m, context) Please use JXG.Board.on instead.
| addKeyboardEventHandlers() Register keyboard event handlers.
| addLogEntry(type, obj, pos) Add user activity to the array 'board.userLog'.
| addMouseEventHandlers() Registers mouse move, down and wheel event handlers.
| addPointerEventHandlers() Registers pointer event handlers.
| addResizeEventHandlers() Add resize related event handlers
| addTouchEventHandlers(appleGestures) Register touch start and move and gesture start and change event handlers.
| addWheelEventHandlers() Registers pointer event handlers.
| animate() General purpose animation function.
| applyZoom() Apply update on all objects with the new zoom-factors.
| calculateSnapSizes() Calculates adequate snap sizes.
<private> | checkFrameRate(evt) Returns false if the event has been triggered faster than the maximum frame rate.
| clearTraces() Delete the elements drawn as part of a trace of an element.
| clickDownArrow() Handler for click on down arrow in the navigation bar
| clickLeftArrow() Handler for click on left arrow in the navigation bar
| clickRightArrow() Handler for click on right arrow in the navigation bar
| clickUpArrow() Handler for click on up arrow in the navigation bar
| create(elementType, parents, attributes) Creates a new geometric element of type elementType.
| createElement() Deprecated name for JXG.Board.create.
| createRoulette(c1, c2, start_c1, stepsize, direction, time, pointlist) Function to animate a curve rolling on another curve.
| dehighlightAll() Remove highlighting of all elements.
| displayInfobox(val) Set infobox visible / invisible.
| emulateColorblindness(deficiency) Initializes color blindness simulation.
| finalizeAdding(obj) After construction of the object the visibility is set and the label is constructed if necessary.
| fullscreenListener(evt) If fullscreen mode is toggled, the possible CSS transformations which are applied to the JSXGraph canvas have to be reread.
| fullUpdate() Runs through all elements and calls their update() method and update the conditions.
| generateId() Generates unique id for a board.
| generateName(object) Generates an unique name for the given object.
| gestureChangeListener(evt) Triggered on iOS/Safari while the user inputs a gesture (e.g.
| gestureStartListener(evt) Called by iOS/Safari as soon as the user starts a gesture.
| getAllObjectsUnderMouse(evt) Collects all elements under current mouse position.
| getAllUnderMouse(evt) Collects all elements under current mouse position plus current user coordinates of mouse cursor.
| getBoundingBox() Get the bounding box of the board.
| getCoordsTopLeftCorner() Calculates mouse coordinates relative to the boards container.
| getMousePosition(e, i) Get the position of the pointing device in screen coordinates, relative to the upper left corner of the host tag.
<private> | getScrCoordsOfMouse(x, y) Returns the input parameters in an array.
| getUsrCoordsOfMouse(evt) This method calculates the user coords of the current mouse coordinates.
| hasPoint(x, y) Checks if the given point is inside the boundingbox.
| highlightCustomInfobox(text, el) Changes the text of the info box to what is provided via text.
| highlightInfobox(x, y, el) Changes the text of the info box to show the given coordinates.
| initGeonextBoard() Initialize some objects which are contained in every GEONExT construction by default, but are not contained in the gxt files.
| initInfobox(attributes) Initialize the info box object which is used to display the coordinates of points near the mouse pointer,

initMoveObject(x, y, evt, type)
Collects all elements below the current mouse pointer and fulfilling the following constraints:

- isDraggable
- visible
- not fixed
- not frozen

| initMoveOrigin(x, y) Initiate moving the origin.
| keyDownListener(evt) Allow moving of JSXGraph elements with arrow keys.
| keyFocusInListener(evt) Event listener for SVG elements getting focus.
| keyFocusOutListener(evt) Event listener for SVG elements losing focus.
| migratePoint(src, dest, copyName) Migrate the dependency properties of the point src to the point dest and delete the point src.
| mouseClickListener(evt) This method is called by the browser when the mouse device clicks on the screen.
| mouseDblClickListener(evt) This method is called by the browser when the mouse device double clicks on the screen.
| mouseDownListener(evt) This method is called by the browser when the mouse button is clicked.
| mouseMoveListener(evt) This method is called by the browser when the mouse is moved.
| mouseUpListener(evt) This method is called by the browser when the mouse button is released.
| mouseWheelListener(evt) Handler for mouse wheel events.
| moveObject(x, y, o, evt, type) Moves an object.
| moveOrigin(x, y, diff) Moves the origin and initializes an update of all elements.
<private> | originMoveEnd() Stop moving the origin with one finger
| pointerClickListener(evt) This method is called by the browser when a pointer device clicks on the screen.
| pointerDblClickListener(evt) This method is called by the browser when a pointer device double clicks on the screen.
| pointerDownListener(evt, object, allowDefaultEventHandling) This method is called by the browser when a pointing device is pressed on the screen.
| pointerLeaveListener(evt) Triggered by the pointerleave event.
| pointerMoveListener(evt) Called periodically by the browser while the user moves a pointing device across the screen.
| pointerUpListener(evt) Triggered as soon as the user stops touching the device with at least one finger.
| prepareUpdate(drag) Sets for all objects the needsUpdate flag to 'true'.
| printListener(evt) Update the container before and after printing.
| printListenerMatch(mql) Wrapper for printListener to be used in mediaQuery matches.
| removeAncestors(object) Removes the ancestors of an object an the object itself from board and renderer.
| removeChild(board) Deletes a board from the list of dependent boards.
| removeEventHandlers() Remove all event handlers from the board object
| removeFullscreenEventHandlers() Remove all registered event handlers regarding fullscreen mode.
| removeGrids() Removes all grids assigned to this board.
| removeHook(id) Please use JXG.Board.off instead.
| removeKeyboardEventHandlers() Remove all registered touch event handlers.
| removeMouseEventHandlers() De-register mouse event handlers.
| removeObject(object, saveMethod) Removes object from board and renderer.
| removePointerEventHandlers() Remove MSPointer* Event handlers.
| removeResizeEventHandlers() Remove resize related event handlers
| removeTouchEventHandlers() Remove all registered touch event handlers.
| resizeContainer(canvasWidth, canvasHeight, dontset, dontSetBoundingBox) Change the height and width of the board's container.
| resizeListener() Fallback solutions if there is no resizeObserver available in the browser.
<private> | saveStartPos(obj, targets) Helper function which returns a reasonable starting point for the object being dragged.
| scrollListener(evt) Listener to watch for scroll events.
| select(str, onlyByIdOrName) Select a single or multiple elements at once.
| setAttribute(attributes) Sets an arbitrary number of attributes.
| setBoundingBox(bbox, keepaspectratio, setZoom) Set the bounding box of the board.
| setId(obj, type) Composes an id for an element.
| setZoom(fX, fY) Sets the zoom level to `fX` resp `fY`.
| showDependencies() Lists the dependencies graph in a new HTML-window.
| showXML() Lists the XML code of the construction in a new HTML-window.
<private> | startFullscreenResizeObserver(node) Start resize observer to handle orientation changes in fullscreen mode.
| startIntersectionObserver() Watch for changes of the visibility of the JSXGraph container element.
| startResizeObserver() Start observer which reacts to size changes of the JSXGraph container div element.
| startSelectionMode() Start selection mode.
| stopAllAnimation() Cancels all running animations.
<private> | stopFullscreenResizeObserver(node) Remove resize observer to handle orientation changes in fullscreen mode.
| stopIntersectionObserver() Stop the intersection observer
| stopResizeObserver() Stops the resize observer.
| stopSelectionMode() Finalize the selection: disable selection mode and return the coordinates of the selection rectangle.
| suppressDefault(e) Suppresses the default event handling.
| suspendUpdate() Stop updates of the board.
| toFullscreen(id) Expand the JSXGraph construction to fullscreen.
| touchEndListener(evt) Triggered as soon as the user stops touching the device with at least one finger.
| touchMoveListener(evt) Called periodically by the browser while the user moves his fingers across the device.
<private> | touchOriginMove(evt) Move the origin with one finger
| touchStartListener(evt) This method is called by the browser when a finger touches the surface of the touch-device.
<private> | touchStartMoveOriginOneFinger(evt) Start moving the origin with one finger.
| twoFingerMove(p1, p2, o, evt) Moves elements in multitouch mode.
| twoFingerTouchObject(tar, drag, id) Moves, rotates and scales a line or polygon with two fingers.
| unsuspendUpdate() Enable updates of the board.
| update(drag) Runs through most elements and calls their update() method and update the conditions.
| updateConditions()
| updateContainerDims(width, height) Update the width and height of the JSXGraph container div element.
| updateCoords() Update the coords object of all elements which possess this property.
| updateCSSTransforms() Update CSS transformations of type scaling.
| updateElements(drag) Runs through all elements and calls their update() method.
| updateHooks(m) Runs through all hooked functions and calls them.
| updateInfobox(el) Updates and displays a little info box to show coordinates of current selected points.
| updateRenderer() Runs through all elements and calls their update() method.
| updateRendererCanvas() Runs through all elements and calls their update() method.
| zoom100() Reset the zoom level to the original zoom level from initBoard(); Additionally, if the board as been initialized with a boundingBox (which is the default), restore the viewport to the original viewport during initialization.
| zoomAllPoints() Zooms the board so every visible point is shown.
| zoomElements(elements) Reset the bounding box and the zoom level to 100% such that a given set of elements is within the board's viewport.
| zoomIn(x, y) Zooms into the board by the factors board.attr.zoom.factorX and board.attr.zoom.factorY and applies the zoom.
| zoomOut(x, y) Zooms out of the board by the factors board.attr.zoom.factorX and board.attr.zoom.factorY and applies the zoom.

Event Summary
Event Attributes | Event Name and Description
--- | ---
| attribute(e) Whenever the JXG.Board#setAttribute is called.
| boundingbox() The bounding box of the board has changed.
| click(e) Whenever the user clicks on the board.
| dblclick(e) Whenever the user double clicks on the board.
| down(e) Whenever the user starts to touch or click the board.
| hit(e, el, target) Whenever an element is highlighted this event is fired.
| keymove(e, mode) This event is fired whenever the user is moving an element over the board by pressing arrow keys on a keyboard.
| mouseclick(e) Whenever the user clicks on the board with a mouse device.
| mousedblclick(e) Whenever the user double clicks on the board with a mouse device.
| mousedown(e) Whenever the user starts to click on the board.
| mousehit(e, el, target) Whenever an element is highlighted this event is fired.
| mousemove(e, mode) This event is fired whenever the user is moving the mouse over the board.
| mousemoveselecting() A move event while selecting of a region is active from a device sending mouse events.
| mousestartselecting() Select a region is started during a down event from a device sending mouse events or by calling JXG.Board.startSelectionMode.
| mousestopselecting() Selection of a region is stopped during an up event from a device sending mouse events.
| mouseup(e) Whenever the user releases the mousebutton over the board.
| move(e, mode) This event is fired whenever the user is moving the finger or mouse pointer over the board.
| moveselecting() A move event while selecting of a region is active.
| pendown(e) Whenever the user taps the pen on the board.
| penmove(e, mode) This event is fired whenever the user is moving the pen over the board.
| pointerclick(e) Whenever the user clicks on the board with a pointer device.
| pointerdblclick(e) Whenever the user double clicks on the board with a pointer device.
| pointerdown(e) Whenever the user starts to click on the board with a device sending pointer events.
| pointermove(e, mode) This event is fired whenever the user is moving the mouse over the board with a device sending pointer events.
| pointermoveselecting() Select a region is started during a down event from a device sending mouse events.
| pointerstartselecting() Select a region is started during a down event from a device sending pointer events or by calling JXG.Board.startSelectionMode.
| pointerstopselecting() Selection of a region is stopped during an up event from a device sending pointer events.
| pointerup(e) Whenever the user releases the mousebutton over the board with a device sending pointer events.
| startselecting() Select a region is started during a down event or by calling JXG.Board.startSelectionMode
| stopselecting() Selection of a region is stopped during an up event.
| touchend(e) Whenever the user stops touching the board.
| touchmove(e, mode) This event is fired whenever the user is moving the finger over the board.
| touchmoveselecting() Select a region is started during a down event from a device sending touch events.
| touchstart(e) Whenever the user starts to touch the board.
| touchstartselecting() Select a region is started during a down event from a device sending touch events or by calling JXG.Board.startSelectionMode.
| touchstopselecting() Selection of a region is stopped during an up event from a device sending touch events.
| up(e) Whenever the user stops to touch or click the board.
| update() This board is updated.

Class Detail
JXG.Board(container, renderer, id, origin, zoomX, zoomY, unitX, unitY, canvasWidth, canvasHeight, attributes)
Constructs a new Board object.

Parameters:
{String|Object} container
  The id of or reference to the HTML DOM element the board is drawn in. This is usually a HTML div. If it is the reference to an HTML element and this element does not have an attribute "id", this attribute "id" is set to a random value.
{JXG.AbstractRenderer} renderer
  The reference of a renderer.
{String} id
  Unique identifier for the board, may be an empty string or null or even undefined.
{JXG.Coords} origin
  The coordinates where the origin is placed, in user coordinates.
{Number} zoomX
  Zoom factor in x-axis direction
{Number} zoomY
  Zoom factor in y-axis direction
{Number} unitX
  Units in x-axis direction
{Number} unitY
  Units in y-axis direction
{Number} canvasWidth
  The width of canvas
{Number} canvasHeight
  The height of canvas
{Object} attributes
  The attributes object given to JXG.JSXGraph.initBoard

Attribute Detail
{Number} animationDelay
Time (in msec) between two animation steps. Used in JXG.CoordsElement#moveAlong, JXG.CoordsElement#moveTo and JXG.CoordsElement#visit.
Defined in: options.js.

See:
  JXG.CoordsElement#moveAlong
  JXG.CoordsElement#moveTo
  JXG.CoordsElement#visit

Default Value:
  35

{Boolean} axis
Show default axis. If shown, the horizontal axis can be accessed via JXG.Board.defaultAxes.x, the vertical axis can be accessed via JXG.Board.defaultAxes.y. Both axes have a sub-element "defaultTicks". Value can be Boolean or an object containing axis attributes.
Defined in: options.js.

Default Value:
  false

{Array} boundingBox
Bounding box of the visible area in user coordinates. It is an array consisting of four values: [x1, y1, x2, y2] The canvas will be spanned from the upper left corner (x1, y1) to the lower right corner (x2, y2).
Defined in: options.js.

    var board = JXG.JSXGraph.initBoard('jxgbox', {
            boundingbox: [-5, 5, 5, -5],
            axis: true
        });

See:
  JXG.Board#maxBoundingBox
  JXG.Board#keepAspectRatio

Default Value:
  [-5, 5, 5, -5]

{Boolean} browserPan
Enable browser scrolling on touch interfaces if the user double taps into an empty region of the board. In turn, browser scrolling is deactivated as soon as a JSXGraph element is dragged.

- Implemented for pointer touch devices - not with mouse, pen or old iOS touch.
- It only works if browserPan:true
- One finger action by the settings "pan.enabled:true" and "pan.needTwoFingers:false" has priority.

Defined in: options.js.

    const board = JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-5, 5, 5, -5], axis: true,
        pan: {
            enabled: true,
            needTwoFingers: true,
        },
        browserPan: true,
        zoom: {
            enabled: false
        }
    });

    var p1 = board.create('point', [1, -1]);
    var p2 = board.create('point', [2.5, -2]);
    var li1 = board.create('line', [p1, p2]);

See:
  JXG.Board#pan

Default Value:
  false

{Number} clickDelay
Maximum time delay (in msec) between two clicks to be considered as double click. This attribute is used together with JXG.Board#dblClickSuppressClick. The JavaScript standard is that a click event is preceded by two click events, see https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event. In case of JXG.Board#dblClickSuppressClick being true, the JavaScript standard is ignored and this time delay is used to suppress the two click events if they are followed by a double click event.

In case of JXG.Board#dblClickSuppressClick being false, this attribute is used to clear the list of clicked elements after the time specified by this attribute.

Recommendation: if JXG.Board#dblClickSuppressClick is true, use a value of approx. 300, otherwise stay with the default 600.
Defined in: options.js.

See:
  JXG.Board#dblClickSuppressClick

Default Value:
  600

{Boolean} dblClickSuppressClick
If false (default), JSXGraph follows the JavaScript standard and fires before a dblclick event two click events.

If true, the click events are suppressed if there is a dblclick event. The consequence is that in this case any click event is fired with a delay specified by JXG.Board#clickDelay.
Defined in: options.js.

See:
  JXG.Board#clickDelay

Default Value:
  false

{Object} defaultAxes
Attributes for the default axes in case of the attribute axis:true in JXG.JSXGraph#initBoard.
Defined in: options.js.

    const board = JXG.JSXGraph.initBoard('id', {
        boundingbox: [-5, 5, 5, -5], axis:true,
        defaultAxes: {
            x: {
              name: 'Distance (mi)',
              withLabel: true,
              label: {
                position: 'rt',
                offset: [-5, 15],
                anchorX: 'right'
              }
            },
            y: {
              withLabel: true,
              name: 'Y',
              label: {
                position: 'rt',
                offset: [-20, -5],
                anchorY: 'top'
              }
            }
        }
    });

     // Display ticks labels as fractions
     var board = JXG.JSXGraph.initBoard('jxgbox', {
         boundingbox: [-1.2, 2.3, 1.2, -2.3],
         axis: true,
         defaultAxes: {
             x: {
                 ticks: {
                     label: {
                         useMathJax: true,
                         display: 'html',
                         toFraction: true
                     }
                 }
             },
             y: {
                 ticks: {
                     label: {
                         useMathJax: true,
                         display: 'html',
                         toFraction: true
                     }
                 }
             }
         }
     });

Default Value:
  `{x: {name:'x'}, y: {name: 'y'}}`

{Object} document
Supply the document object. Defaults to window.document DOM object
Defined in: options.js.

Default Value:
  false (meaning window.document)

{Object} drag
Control the possibilities for dragging objects. Possible sub-attributes with default values are:

    drag: {
      enabled: true   // Allow dragging
    }

Defined in: options.js.

Default Value:
  `{enabled: true}`

{Object} fullscreen
Attribute(s) to control the fullscreen icon. The attribute "showFullscreen" controls if the icon is shown. The following attribute(s) can be set:

- symbol (String): Unicode symbol which is shown in the navigation bar. Default: svg code for '\u26f6', other possibilities are the unicode symbols '\u26f6' and '\u25a1'. However, '\u26f6' is not supported by MacOS and iOS.
- scale (number between 0 and 1): Relative size of the larger side of the JSXGraph board in the fullscreen window. 1.0 gives full width or height. Default value is 0.85.
- id (String): Id of the HTML element which is brought to full screen or null if the JSXgraph div is taken. It may be an outer div element, e.g. if the old aspect ratio trick is used. Default: null, i.e. use the JSXGraph div.

Defined in: options.js.

    var board = JXG.JSXGraph.initBoard('35bec5a2-fd4d-11e8-ab14-901b0e1b8723',
                {boundingbox: [-8, 8, 8,-8], axis: true,
                showcopyright: false,
                showFullscreen: true,
                fullscreen: {
                     symbol: '\u22c7',
                     scale: 0.95
                 }
                });
    var pol = board.create('polygon', [[0, 1], [3,4], [1,-4]], {fillColor: 'yellow'});

See:
  JXG.Board#showFullscreen
  JXG.AbstractRenderer#drawNavigationBar

Default Value:
  svg code

{Booelan} ignoreLabels
If set true and hasPoint() is true for both an element and it's label, the element (and not the label) is taken as drag element.

If set false and hasPoint() is true for both an element and it's label, the label is taken (if it is on a higher layer than the element)

Meanwhile, this feature might be irrelevant.
Defined in: options.js.

Default Value:
  true

{Object} intl
Support for internationalization of number formatting. This affects

- axis labels
- infobox
- texts consisting of numbers only
- smartlabel elements
- slider labels
- tapemeasure elements
- integral element labels

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat for an overview on the possibilities and the options.

User generated texts consisting of texts AND numbers have to be internationalized by the user, see Text#intl. Language locale and options can be individually controlled for each element by its intl attribute. If no locale is set, the default language of the browser is used.
Defined in: options.js.

    // Set the board-wide locale and use individual
    // options for a text.
    const board = JXG.JSXGraph.initBoard(BOARDID, {
        axis: true,
        intl: {
            enabled: true,
            locale: 'de-DE'
        },
        boundingbox:[-0.5, 0.5, 0.5, -0.5]
    });

    var t = board.create('text', [0.05, 0.2, -Math.PI*100], {
            digits: 2,
            intl: {
                    enabled: true,
                    options: {
                        style: 'unit',
                        unit: 'celsius'
                    }
                }
        });

    // Here, locale is disabled in general, but enabled for the horizontal
    // axis and the infobox.
    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-0.5, 0.5, 0.5, -0.5],
        intl: {
            enabled: false,
            locale: 'de-DE'
        },
        keepaspectratio: true,
        axis: true,
        defaultAxes: {
            x: {
                ticks: {
                    intl: {
                            enabled: true,
                            options: {
                                style: 'unit',
                                unit: 'kilometer-per-hour',
                                unitDisplay: 'narrow'
                            }
                    }
                }
            },
            y: {
                ticks: {
                }
            }
        },
        infobox: {
            fontSize: 12,
            intl: {
                enabled: true,
                options: {
                    minimumFractionDigits: 4,
                    maximumFractionDigits: 5
                }
            }
        }
    });

    var p = board.create('point', [0.1, 0.1], {});

See:
  Integral#label
  Slider#intl
  Text#intl
  Ticks#intl
  JXG.Board.infobox

Default Value:
  `{enabled: false}`

{Boolean} keepAspectRatio
If set to true, the ratio between horizontal and vertical unit sizes stays constant - independent of size changes of the hosting HTML div element.

If the aspect ration of the hosting div changes, JSXGraphs will change the user supplied bounding box accordingly. This is necessary if circles should look like circles and not like ellipses. It is recommended to set keepAspectRatio = true for geometric applets.

For function plotting keepAspectRatio = false might be the better choice.
Defined in: options.js.

See:
  JXG.Board#boundingBox
  JXG.Board#maxBoundingBox
  JXG.Board#setBoundingBox

Default Value:
  false

{Object} keyboard
Control using the keyboard to change the construction.

- enabled: true / false
- dx: horizontal shift amount per key press
- dy: vertical shift amount per key press
- panShift: zoom if shift key is pressed
- panCtrl: zoom if ctrl key is pressed

Defined in: options.js.

    var board = JXG.JSXGraph.initBoard("jxgbox", {boundingbox: [-5,5,5,-5],
        axis: true,
        showCopyright:true,
        showNavigation:true,
        keyboard: {
            enabled: true,
            dy: 30,
            panShift: true,
            panCtrl: false
        }
    });

See:
  JXG.Board#keyDownListener
  JXG.Board#keyFocusInListener
  JXG.Board#keyFocusOutListener

Default Value:
  `{enabled: true, dx: 10, dy:10, panShift: true, panCtrl: false}`

{Object} logging
If enabled, user activities are logged in array "board.userLog".
Defined in: options.js.

    var board = JXG.JSXGraph.initBoard(BOARDID,
             {
                 boundingbox: [-8, 8, 8,-8],
                 axis: true,
                 logging: {enabled: true},
                 showcopyright: false,
                 shownavigation: false
             });
    var A = board.create('point', [-4, 0], { name: 'A' });
    var B = board.create('point', [1, 2], { name: 'B' });
    var showUserLog = function() {
        var txt = '';

        for (let i = 0; i < board.userLog.length; i++) {
            txt += JSON.stringify(board.userLog[i]) + '\n';
        }
        alert(txt);
    };
    var but = board.create('button', [4, 4, 'Show user log', showUserLog]);

See:
  JXG.Board#userLog

Default Value:
  `{enabled: false}`

{Array} maxBoundingBox
Maximal bounding box of the visible area in user coordinates. It is an array consisting of four values: [x1, y1, x2, y2] The bounding box of the canvas must be inside of this maximal bounding box.
Defined in: options.js.

    var board = JXG.JSXGraph.initBoard('jxgbox', {
            boundingBox: [-5, 5, 5, -5],
            maxBoundingBox: [-8, 8, 8, -8],
            pan: {enabled: true},
            axis: true
        });

See:
  JXG.Board#boundingBox

Default Value:
  [-Infinity, Infinity, Infinity, -Infinity]

{Number} maxFrameRate
Maximum frame rate of the board, i.e. maximum number of updates per second triggered by move events.
Defined in: options.js.

Default Value:
  40

{Number} maxNameLength
Maximum number of digits in automatic label generation. For example, if set to 1 automatic point labels end at "Z". If set to 2, point labels end at "ZZ".
Defined in: options.js.

See:
  JXG.Board#generateName

Default Value:
  1

{String} minimizeReflow
Change redraw strategy in SVG rendering engine.

This optimization seems to be obsolete in newer browsers (from 2021 on, at least) and even slow down the constructions. Therefore, the default is set to 'none' since v1.2.4.

If set to 'svg', before every redrawing of the JSXGraph construction the SVG sub-tree of the DOM tree is taken out of the DOM. If set to 'all', before every redrawing of the JSXGraph construction the complete DOM tree is taken out of the DOM. If set to 'none' the redrawing is done in-place. Using 'svg' or 'all' speeds up the update process considerably. The risk is that if there is an exception, only a white div or window is left.
Defined in: options.js.

Default Value:
  'none'

{Object} moveTarget
Element which listens to move events of the pointing device. This allows to drag elements of a JSXGraph construction outside of the board. Especially, on mobile devices this enhances the user experience. However, it is recommended to allow dragging outside of the JSXGraph board only in certain constructions where users may not "loose" points outside of the board. In such a case, points may become unreachable.

A situation where dragging outside of the board is uncritical is for example if only sliders are used to interact with the construction.

Possible values for this attributes are:

- an element specified by document.getElementById('some id');
- null: to use the JSXGraph container div element
- document

Since the introduction of this attribute "moveTarget", the value "document" has become sort of default on touch devices like smartphones. However, it is no longer the case that the document listens to move events, but there is the new feature "setPointerCapture", which is also implicitly enabled on certain devices. In future versions, JSXGraph may adopt this new standard and distinguish only two cases:

- null: no pointerCapture
- document: use pointerCapture

This attribute is immutable. It can be changed as follows: HTML node or document
Defined in: options.js.

    board.setAttribute({moveTarget: null});
    board.removeEventHandlers();
    board.addEventHandlers();

        var board = JXG.JSXGraph.initBoard('jxgbox', {
            boundingbox: [-5,5,5,-5],
            axis: true,
            moveTarget: document
        });

Default Value:
  null

{Number} offsetX
A number that will be added to the absolute position of the board used in mouse coordinate calculations in JXG.Board#getCoordsTopLeftCorner.
Defined in: options.js.

See:
  JXG.Board#offsetY

Default Value:
  0

{Number} offsetY
A number that will be added to the absolute position of the board used in mouse coordinate calculations in JXG.Board#getCoordsTopLeftCorner.
Defined in: options.js.

See:
  JXG.Board#offsetX

Default Value:
  0

{Object} pan
Control the possibilities for panning interaction (i.e. moving the origin). Possible sub-attributes with default values are:

    pan: {
      enabled: true   // Allow panning
      needTwoFingers: false, // panning is done with two fingers on touch devices
      needShift: true, // mouse panning needs pressing of the shift key
    }

Defined in: options.js.

See:
  JXG.Board#browserPan

<static> {Boolean} JXG.Board.registerEvents
Allow user interaction by registering pointer events (including mouse and touch events), fullscreen, keyboard, resize, and zoom events. The latter events are essentially mouse wheel events. Decide if JSXGraph listens to these events.

Using a Boolean value turns on all events (or not), supplying an object of the form

     {
        fullscreen: true / false,
        keyboard: true / false,
        pointer: true / false,
        resize: true / false,
        wheel: true / false
     }

activates individual event handlers. If an event is NOT given, it will be activated.

This attribute is immutable. Please use JXG.Board#addEventHandlers() and JXG.Board#removeEventHandlers() directly.
Defined in: options.js.

See:
  JXG.Board#keyboard
  JXG.Board.registerResizeEvent
  JXG.Board.registerFullscreenEvent

Default Value:
  true

{String} renderer
Default rendering engine. Possible values are 'svg', 'canvas', 'vml', 'no', or 'auto'. If the rendering engine is not available JSXGraph tries to detect a different engine.

In case of 'canvas' it is advisable to call 'board.update()' after all elements have been constructed. This ensures that all elements are drawn with their intended visual appearance.

This attribute is immutable.
Defined in: options.js.

Default Value:
  'auto'

{Object} resize
Control if JSXGraph reacts to resizing of the JSXGraph container element by the user / browser. The attribute "throttle" determines the minimal time in msec between to resize calls.

Attention: if the JSXGraph container has no CSS property like width or height and max-width or max-height set, but has a property like box-sizing:content-box, then the interplay between CSS and the resize attribute may result in an infinite loop with ever increasing JSXGraph container.
Defined in: options.js.

        var board = JXG.JSXGraph.initBoard('jxgbox', {
            boundingbox: [-5,5,5,-5],
            keepAspectRatio: true,
            axis: true,
            resize: {enabled: true, throttle: 200}
        });

See:
  JXG.Board#startResizeObserver
  JXG.Board#resizeListener

Default Value:
  `{enabled: true, throttle: 10}`

{Object} screenshot
Attributes to control the screenshot function. The following attributes can be set:

- scale: scaling factor (default=1.0)
- type: format of the screenshot image. Default: png
- symbol: Unicode symbol which is shown in the navigation bar. Default: '\u2318'
- css: CSS rules to format the div element containing the screen shot image
- cssButton: CSS rules to format the close button of the div element containing the screen shot image

The screenshot will fail if the board contains text elements or foreign objects containing SVG again.
Defined in: options.js.

{Object} selection
Control the possibilities for a selection rectangle. Starting a selection event triggers the "startselecting" event. When the mouse pointer is released, the "stopselecting" event is fired. The "stopselecting" event is supplied by the user.

So far it works in SVG renderer only.

Possible sub-attributes with default values are:

    selection: {
      enabled: false,
      name: 'selectionPolygon',
      needShift: false,  // mouse selection needs pressing of the shift key
      needCtrl: true,    // mouse selection needs pressing of the shift key
      fillColor: '#ffff00'
    }

Board events triggered by selection manipulation: 'startselecting', 'stopselecting', 'mousestartselecting', 'mousestopselecting', 'pointerstartselecting', 'pointerstopselecting', 'touchstartselecting', 'touchstopselecting'.
Defined in: options.js.

    board.on('stopselecting', function(){
        var box = board.stopSelectionMode(),
        // bbox has the coordinates of the selectionr rectangle.
        // Attention: box[i].usrCoords have the form [1, x, y], i.e.
        // are homogeneous coordinates.
        bbox = box[0].usrCoords.slice(1).concat(box[1].usrCoords.slice(1));
        // Set a new bounding box
        board.setBoundingBox(bbox, false);
    });

See:
  JXG.Board#startSelectionMode
  JXG.Board#stopSelectionMode

{Boolean} showClearTraces
Show a button which allows to clear all traces of a board. This button can be accessed by JavaScript or CSS with the ID `"{board_id}_navigation_button_cleartraces"` or by the CSS classes `JXG_navigation_button"` or `JXG_navigation_button_cleartraces"`.
Defined in: options.js.

See:
  JXG.AbstractRenderer#drawNavigationBar

Default Value:
  false

{Boolean} showCopyright
Show copyright string in canvas.
Defined in: options.js.

Default Value:
  true

{Boolean} showFullscreen
Show a button in the navigation bar to start fullscreen mode. This button can be accessed by JavaScript or CSS with the ID `"{board_id}_navigation_button_fullscreen"` or by the CSS classes `JXG_navigation_button"` or `JXG_navigation_button_fullscreen"`.
Defined in: options.js.

See:
  JXG.Board#fullscreen
  JXG.AbstractRenderer#drawNavigationBar
  JXG.AbstractRenderer#drawNavigationBar

Default Value:
  false

{Boolean} showInfobox
If true, the infobox is shown on mouse/pen over for all points which have set their attribute showInfobox to 'inherit'. If a point has set its attribute showInfobox to false or true, that value will have priority over this value.
Defined in: options.js.

See:
  Point#showInfobox

Default Value:
  true

{Boolean} showNavigation
Display of navigation arrows and zoom buttons in the navigation bar.

The navigation bar has the the ID `"{board_id}_navigation"` and the CSS class `JXG_navigation"`. The individual buttons can be accessed by JavaScript or CSS with the ID `"{board_id}_navigation_button_{type}"` or by the CSS classes `JXG_navigation_button"` or `JXG_navigation_button_{type}"`, where `{type}` is one of `left`, `right`, or `up`, `down`, `in`, `100`, or `out`, `fullscreen`, `screenshot`, `cleartraces`, `reload`.
Defined in: options.js.

See:
  JXG.AbstractRenderer#drawNavigationBar

Default Value:
  true

{Boolean} showReload
Show a button in the navigation bar to force reload of a construction. Works only with the JessieCode tag. This button can be accessed by JavaScript or CSS with the ID `"{board_id}_navigation_button_reload"` or by the CSS classes `JXG_navigation_button"` or `JXG_navigation_button_reload"`.
Defined in: options.js.

See:
  JXG.AbstractRenderer#drawNavigationBar

Default Value:
  false

{Boolean} showScreenshot
Show a button in the navigation bar to enable screenshots. This button can be accessed by JavaScript or CSS with the ID `"{board_id}_navigation_button_screenshot"` or by the CSS classes `JXG_navigation_button"` or `JXG_navigation_button_screenshot"`.
Defined in: options.js.

See:
  JXG.AbstractRenderer#drawNavigationBar

Default Value:
  false

{Boolean} showZoom
Display of zoom buttons in the navigation bar. To show zoom buttons, additionally showNavigation has to be set to true.

The individual buttons can be accessed by JavaScript or CSS with the ID `"{board_id}_navigation_button_{type}"` or by the CSS classes `JXG_navigation_button"` or `JXG_navigation_button_{type}"`, where `{type}` is `in`, `100`, or `out`.
Defined in: options.js.

See:
  JXG.AbstractRenderer#drawNavigationBar

Default Value:
  true

{Boolean} takeFirst
If true the first element of the set JXG.board.objects having hasPoint==true is taken as drag element.
Defined in: options.js.

Default Value:
  false

{Boolean} takeSizeFromFile
If true, when read from a file or string - the size of the div can be changed by the construction text.
Defined in: options.js.

Default Value:
  false

{String} theme
Set a visual theme for a board. At the moment this attribute is immutable. Available themes are

- 'default'
- 'mono_thin': a black / white theme using thin strokes. Restricted to 2D.

Defined in: options.js.

     const board = JXG.JSXGraph.initBoard('jxgbox', {
         boundingbox: [-5, 5, 5, -5], axis: true,
         theme: 'mono_thin'
     });

     var a = board.create('slider', [[1, 4], [3, 4], [-10, 1, 10]]);
     var p1 = board.create('point', [1, 2]);
     var ci1 = board.create('circle', [p1, 0.7]);
     var cu = board.create('functiongraph', ['x^2']);
     var l1 = board.create('line', [2, 3, -1]);
     var l2 = board.create('line', [-5, -3, -1], { dash: 2 });
     var i1 = board.create('intersection', [l1, l2]);
     var pol = board.create('polygon', [[1, 0], [4, 0], [3.5, 1]]);
     var an = board.create('angle', [pol.vertices[1], pol.vertices[0], pol.vertices[2]]);
     var se = board.create('sector', [pol.vertices[1], pol.vertices[2], pol.vertices[0]]);
     var ci1 = board.create('circle', [[-3, -3], 0.7], { center: { visible: true } });

Default Value:
  'default'

{String} title
Title string for the board. Primarily used in an invisible text element for assistive technologies. The title is implemented with the attribute 'aria-label' in the JSXGraph container. Content should be accessible to all users, not just to those with screen readers. Consider instead adding a text element with the title and add the attribute aria:{enable:true,label:"Your Title"}
Defined in: options.js.

Default Value:
  ''

{Object} zoom
Control the possibilities for zoom interaction. Possible sub-attributes with default values are:

    zoom: {
      enabled: true,  // turns off zooming completely, if set to false.
      factorX: 1.25,  // horizontal zoom factor (multiplied to JXG.Board#zoomX)
      factorY: 1.25,  // vertical zoom factor (multiplied to JXG.Board#zoomY)
      wheel: true,    // allow zooming by mouse wheel
      needShift: true,  // mouse wheel zooming needs pressing of the shift key
      min: 0.001,       // minimal values of JXG.Board#zoomX and JXG.Board#zoomY, limits zoomOut
      max: 1000.0,      // maximal values of JXG.Board#zoomX and JXG.Board#zoomY, limits zoomIn
      center: 'auto',   // 'auto': the center of zoom is at the position of the mouse or at the midpoint of two fingers
                        // 'board': the center of zoom is at the board's center
      pinch: true,      // pinch-to-zoom gesture for proportional zoom
      pinchHorizontal: true, // Horizontal pinch-to-zoom zooms horizontal axis. Only available if keepaspectratio:false
      pinchVertical: true,   // Vertical pinch-to-zoom zooms vertical axis only. Only available if keepaspectratio:false
      pinchSensitivity: 7    // Sensitivity (in degrees) for recognizing horizontal or vertical pinch-to-zoom gestures.
    }

If the zoom buttons are visible, zooming by clicking the buttons is still possible, regardless of zoom.enabled:true/false. If this should be prevented, set showZoom:false. Deprecated: zoom.eps which is superseded by zoom.min
Defined in: options.js.

See:
  JXG.Board#showZoom

Default Value:
  See above

{Number} zoomX
Zoom factor in horizontal direction.
Defined in: options.js.

See:
  JXG.Board#zoomY

Default Value:
  1.0

{Number} zoomY
Zoom factor in vertical direction.
Defined in: options.js.

See:
  JXG.Board#zoomX

Default Value:
  1.0

Field Detail
<private> {Array} _board_touches
Keeps a list of pointer devices which are currently touching the screen.

<private> {Boolean} _change3DView
A flag which tells us if the update is triggered by a change of the 3D view. In that case we only have to update the projection of the 3D elements and can avoid a full board update.

Default Value:
  false

<private> {Array} _drag_offset
Offset for large coords elements like images

Default Value:
  [0, 0]

<private> {String} _inputDevice
Stores the input device used in the last down or move event.

Default Value:
  'mouse'

<private> {Boolean} _isResizing
A flag which tells us if a resize is in process

See:
  JXG.Board#resizeListener

Default Value:
  false

<private> {Boolean} _isScrolling
A flag which tells us if the user is scrolling the viewport

See:
  JXG.Board#scrollListener

Default Value:
  false

addEvent
Alias of JXG.Board.on.

{Object} animationObjects
Stores all the objects that are currently running an animation.

{Object} attr
Board attributes

<constant> {Number} BOARD_MODE_DRAG
Board is in drag mode, objects aren't highlighted on mouse over and the object referenced in JXG.Board#mouse is updated on mouse movement.

<constant> {Number} BOARD_MODE_MOVE_ORIGIN
In this mode a mouse move changes the origin's screen coordinates.

<constant> {Number} BOARD_MODE_NONE
Board is in no special mode, objects are highlighted on mouse over and objects may be clicked to start drag&drop.

<constant> {Number} BOARD_MODE_ZOOM
Update is made with high quality, e.g. graphs are evaluated at much more points.

See:
  JXG.Board#updateQuality

<constant> {Number} BOARD_QUALITY_HIGH
Update is made with high quality, e.g. graphs are evaluated at much more points.

See:
  JXG.Board#updateQuality

<constant> {Number} BOARD_QUALITY_LOW
Update is made with low quality, e.g. graphs are evaluated at a lesser amount of points.

See:
  JXG.Board#updateQuality

<private> {Number} canvasHeight
Canvas Height

<private> {Number} canvasWidth
Canvas width.

{String} container
The html-id of the html element containing the board.

{Object} containerObj
Pointer to the html element containing the board.

{Array} cPos
Cached result of getCoordsTopLeftCorner for touch/mouseMove-Events to save some DOM operations.

currentCBDef
The current color blindness deficiency is stored in this property. If color blindness is not emulated at the moment, it's value is 'none'.

{Array} dependentBoards
An array containing all other boards that are updated after this board has been updated.

See:
  JXG.Board#addChild
  JXG.Board#removeChild

{Number} dimension
Dimension of the board.

Default Value:
  2

{Array} downObjects
Collects all elements that triggered a mouse down event.

{Number} drag_dx
The distance from the mouse to the dragged object in x direction when the user clicked the mouse button.

See:
  JXG.Board#drag_dy

{Number} drag_dy
The distance from the mouse to the dragged object in y direction when the user clicked the mouse button.

See:
  JXG.Board#drag_dx

{Array} drag_position
The last position where a drag event has been fired.

See:
  JXG.Board#moveObject

{Object} elementsByName
An associative array / dictionary to store the objects of the board by name. The name of the object is the key and value is a reference to the object.

{Array} focusObjects
Collects all elements that have keyboard focus. Should be either one or no element. Elements are stored with their id.

{Boolean} geonextCompatibilityMode
If GEONExT constructions are displayed, then this property should be set to true. At the moment there should be no difference. But this may change. This is set in JXG.GeonextReader.readGeonext.

See:
  JXG.GeonextReader.readGeonext

Default Value:
  false

<private> {Array} grids
Grids keeps track of all grids attached to this board.

{Object} groups
An associative array containing all groups belonging to the board. Key is the id of the group and value is a reference to the object.

{Boolean} hasMouseHandlers
A flag which tells if the board registers mouse events.

Default Value:
  false

{Boolean} hasMouseUp
A flag which tells if the board the JXG.Board#mouseUpListener is currently registered.

Default Value:
  false

{Boolean} hasPointerHandlers
A flag which stores if the board registered pointer events.

Default Value:
  false

{Boolean} hasPointerUp
A flag which tells us if the board has a pointerUp event registered at the moment.

Default Value:
  false

{Boolean} hasTouchEnd
A flag which tells if the board the JXG.Board#touchEndListener is currently registered.

Default Value:
  false

{Boolean} hasTouchHandlers
A flag which tells if the board registers touch events.

Default Value:
  false

{Boolean} hasWheelHandlers
A flag which stores if the board registered zoom events, i.e. mouse wheel scroll events.

Default Value:
  false

{Object} highlightedObjects
An associative array containing all highlighted elements belonging to the board.

{String} id
ID of the board

{Boolean} inUpdate
During the update process this is set to false to prevent an endless loop.

Default Value:
  false

{Boolean} isSelecting
A flag which tells us if the user is selecting

Default Value:
  false

{Boolean} isSuspendedRedraw
If true updates are skipped.

<private> {Boolean} keepaspectratio
Keep aspect ratio if bounding box is set and the width/height ratio differs from the width/height ratio of the canvas.

{Number} mode
The board mode the board is currently in. Possible values are

- JXG.Board.BOARD_MODE_NONE
- JXG.Board.BOARD_MODE_DRAG
- JXG.Board.BOARD_MODE_MOVE_ORIGIN

{JXG.GeometryElement} mouse
References to the object that is dragged with the mouse on the board.

See:
  JXG.Board#touches

{Boolean} needsFullUpdate
Full updates are needed after zoom and axis translates. This saves some time during an update.

Default Value:
  false

{Number} numObjects
Number of objects ever created on this board. This includes every object, even invisible and deleted ones.

{Object} objects
An associative array containing all geometric objects belonging to the board. Key is the id of the object and value is a reference to the object.

{Array} objectsList
An array containing all geometric objects on the board in the order of construction.

{JXG.Options} options
Copy of the default options

<private> {Object} origin
Coordinates of the boards origin. This a object with the two properties usrCoords and scrCoords. usrCoords always equals [1, 0, 0] and scrCoords stores the boards origin in homogeneous screen coordinates.

{Number} positionAccessLast
Contains the last time (epoch, msec) since the last getCoordsTopLeftCorner call which was not thrown away.

{Boolean} reducedUpdate
If reducedUpdate is set to true then only the dragged element and few (e.g. 2) following elements are updated during mouse move. On mouse up the whole construction is updated. This enables us to be fast even on very slow devices.

Default Value:
  false

removeEvent
Alias of JXG.Board.off.

{Array} resizeHandlers
Array containing the events related to resizing that have event listeners.

Default Value:
  []

{Array} selectingBox
A bounding box for the selection

Default Value:
  [ [0,0], [0,0] ]

{Boolean} selectingMode
A flag which tells us if the board is in the selecting mode

Default Value:
  false

{Array} touches
Keeps track on touched elements, like JXG.Board#mouse does for mouse events.

See:
  JXG.Board#mouse

{Number} touchMoveLast
Contains the last time (epoch, msec) since the last touchMove event which was not thrown away or since touchStart because Android's Webkit browser fires too much of them.

{Number} touchMoveLastId
Contains the pointerId of the last touchMove event which was not thrown away or since touchStart because Android's Webkit browser fires too much of them.

<private> {Number} unitX
The number of pixels which represent one unit in user-coordinates in x direction.

<private> {Number} unitY
The number of pixels which represent one unit in user-coordinates in y direction.

{Number} updateQuality
The update quality of the board. In most cases this is set to JXG.Board#BOARD_QUALITY_HIGH. If JXG.Board#mode equals JXG.Board#BOARD_MODE_DRAG this is set to JXG.Board#BOARD_QUALITY_LOW to speed up the update process by e.g. reducing the number of evaluation points when plotting functions. Possible values are

- BOARD_QUALITY_LOW
- BOARD_QUALITY_HIGH

See:
  JXG.Board#mode

{Array} userLog
Array to log user activity. Entries are objects of the form '{type, id, start, end}' notifying the start time as well as the last time of a single event of type 'type' on a JSXGraph element of id 'id'.

'start' and 'end' contain the amount of milliseconds elapsed between 1 January 1970 00:00:00 UTC and the time the event happened.

For the time being (i.e. v1.5.0) the only supported type is 'drag'.

{String} xmlString
A string containing the XML text of the construction. This is set in JXG.FileReader.parseString. Only useful if a construction is read from a GEONExT-, Intergeo-, Geogebra-, or Cinderella-File.
Method Detail
<private> {Object} _createSelectionPolygon(attr)
Create the internal selection polygon, which will be available as board.selectionPolygon.

Parameters:
{Object} attr
  board attributes, e.g. the subobject board.attr.

Returns:
  {Object} pointer to the board to enable chaining.

<private> {String} _getPointerInputDevice(evt)
Determine which input device is used for this action. Possible devices are 'touch', 'pen' and 'mouse'. This affects the precision and certain events. In case of no browser, 'mouse' is used.

Parameters:
{Event} evt
  The browsers event object.

Returns:
  {String} 'mouse', 'pen', or 'touch'

See:
  JXG.Board#pointerDownListener
  JXG.Board#pointerMoveListener
  JXG.Board#initMoveObject
  JXG.Board#moveObject

<private> _handleClicks(evt, evtArray)
Internal handling of click events for pointers and mouse.

Parameters:
{Event} evt
  The browsers event object.
{Array} evtArray
  list of event names

<private> _handleDblClicks(evt, evtArray)
Internal handling of dblclick events for pointers and mouse.

Parameters:
{Event} evt
  The browsers event object.
{Array} evtArray
  list of event names

<private> {Boolean} _isPointerRegistered(evt)
Check if pointer event is already registered in JXG.Board#_board_touches.

Parameters:
{Object} evt
  Event object

Returns:
  {Boolean} true if down event has already been sent.

<private> {Boolean} _isRequiredKeyPressed(evt, action)
Test if the required key combination is pressed for wheel zoom, move origin and selection

Parameters:
{Object} evt
  Mouse or pen event
{String} action
  String containing the action: 'zoom', 'pan', 'selection'. Corresponds to the attribute subobject.

Returns:
  {Boolean} true or false.

<private> _moveSelecting(pos)
Update the selection rectangle during a move event.

Parameters:
{Array} pos
  Screen coordiates of the move event

<private> {JXG.Board} _pointerClearTouches(pId)
Remove all registered fingers from JXG.Board#_board_touches. This might be necessary if too many fingers have been registered.

Parameters:
pId

Returns:
  {JXG.Board} Reference to the board

<private> {JXG.Board} _pointerRemoveTouches(evt)
Deregisters a pointer event in JXG.Board#_board_touches. It happens if a finger has been lifted from the screen.

Parameters:
{Object} evt
  Event object

Returns:
  {JXG.Board} Reference to the board

<private> {JXG.Board} _pointerStorePosition(evt)
Store the position of a pointer event. If not yet done, registers a pointer event in JXG.Board#_board_touches. Allows to follow the path of that finger on the screen. Only two simultaneous touches are supported.

Parameters:
{Object} evt
  Event object

Returns:
  {JXG.Board} Reference to the board

<private> {JXG.Board} _removeObj(object, saveMethod)
Inner, recursive method of removeObject.

Parameters:
{JXG.GeometryElement|Array} object
  The object to remove or array of objects to be removed. The element(s) is/are given by name, id or a reference.
{Boolean} saveMethod Optional, Default: false
  If saveMethod=true, the algorithm runs through all elements and tests if the element to be deleted is a child element. If this is the case, it will be removed from the list of child elements. If saveMethod=false (default), the element is removed from the lists of child elements of all its ancestors. The latter should be much faster.

Returns:
  {JXG.Board} Reference to the board

<private> _set(key, value)
Sets the value of attribute `key` to `value`.

Parameters:
{String} key
  The attribute's name.
value
  The new value

<private> _setSelectionPolygonFromBox()
Update the Selection rectangle.

<private> _startSelecting(pos)
Start the selection of a region.

Parameters:
{Array} pos
  Screen coordiates of the upper left corner of the selection rectangle.

<private> _stopSelecting(evt)
Update the selection rectangle during an up event. Stop selection.

Parameters:
{Object} evt
  Event object

<private> _testForSelection(evt)
Test if a down event should start a selection. Test if the required keys are pressed. If yes, JXG.Board.startSelectionMode is called.

Parameters:
{Object} evt
  Event object

{JXG.Board} addAnimation(element)
Adds an animation. Animations are controlled by the boards, so the boards need to be aware of the animated elements. This function tells the board about new elements to animate.

Parameters:
{JXG.GeometryElement} element
  The element which is to be animated.

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} addChild(board)
Adds a dependent board to this board.

Parameters:
{JXG.Board} board
  A reference to board which will be updated after an update of this board occurred.

Returns:
  {JXG.Board} Reference to the board

addConditions(str)
Add conditional updates to the elements.

Parameters:
{String} str
  String containing conditional update in geonext syntax

addEventHandlers()
Add all possible event handlers to the board object that move objects, i.e. mouse, pointer and touch events.

addFullscreenEventHandlers()
Add fullscreen events which update the CSS transformation matrix to correct the mouse/touch/pointer positions in case of CSS transformations.

{JXG.Board} addGrid()
Adds a grid to the board according to the settings given in board.options.

Returns:
  {JXG.Board} Reference to the board.

{Number} addHook(hook, m, context)
Please use JXG.Board.on instead.

Parameters:
{Function} hook
  A function to be called by the board after an update occurred.
{String} m Optional, Default: 'update'
  When the hook is to be called. Possible values are mouseup, mousedown and update.
{Object} context Optional, Default: board
  Determines the execution context the hook is called. This parameter is optional, default is the board object the hook is attached to.

Returns:
  {Number} Id of the hook, required to remove the hook from the board.

addKeyboardEventHandlers()
Register keyboard event handlers.

{JXG.Board} addLogEntry(type, obj, pos)
Add user activity to the array 'board.userLog'.

Parameters:
{String} type
  Event type, e.g. 'drag'
{Object} obj
  JSXGraph element object
pos

Returns:
  {JXG.Board} Reference to the board

See:
  JXG.Board#userLog

addMouseEventHandlers()
Registers mouse move, down and wheel event handlers.

addPointerEventHandlers()
Registers pointer event handlers.

addResizeEventHandlers()
Add resize related event handlers

addTouchEventHandlers(appleGestures)
Register touch start and move and gesture start and change event handlers.

Parameters:
{Boolean} appleGestures
  If set to false the gesturestart and gesturechange event handlers will not be registered. Since iOS 13, touch events were abandoned in favour of pointer events

addWheelEventHandlers()
Registers pointer event handlers.

{JXG.Board} animate()
General purpose animation function. This currently only supports moving points from one place to another. This is faster than managing the animation per point, especially if there is more than one animated point at the same time.

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} applyZoom()
Apply update on all objects with the new zoom-factors. Clears all traces.

Returns:
  {JXG.Board} Reference to the board.

{JXG.Board} calculateSnapSizes()
Calculates adequate snap sizes.

Returns:
  {JXG.Board} Reference to the board.

<private> {Boolean} checkFrameRate(evt)
Returns false if the event has been triggered faster than the maximum frame rate.

Parameters:
{Event} evt
  Event object given by the browser (unused)

Returns:
  {Boolean} If the event has been triggered faster than the maximum frame rate, false is returned.

See:
  JXG.Board#pointerMoveListener
  JXG.Board#touchMoveListener
  JXG.Board#mouseMoveListener

{JXG.Board} clearTraces()
Delete the elements drawn as part of a trace of an element.

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} clickDownArrow()
Handler for click on down arrow in the navigation bar

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} clickLeftArrow()
Handler for click on left arrow in the navigation bar

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} clickRightArrow()
Handler for click on right arrow in the navigation bar

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} clickUpArrow()
Handler for click on up arrow in the navigation bar

Returns:
  {JXG.Board} Reference to the board

{Object} create(elementType, parents, attributes)
Creates a new geometric element of type elementType.

Parameters:
{String} elementType
  Type of the element to be constructed given as a string e.g. 'point' or 'circle'.
{Array} parents
  Array of parent elements needed to construct the element e.g. coordinates for a point or two points to construct a line. This highly depends on the elementType that is constructed. See the corresponding JXG.create* methods for a list of possible parameters.
{Object} attributes Optional
  An object containing the attributes to be set. This also depends on the elementType. Common attributes are name, visible, strokeColor.

Returns:
  {Object} Reference to the created element. This is usually a GeometryElement, but can be an array containing two or more elements.

createElement()
Deprecated name for JXG.Board.create.

createRoulette(c1, c2, start_c1, stepsize, direction, time, pointlist)
Function to animate a curve rolling on another curve.

Parameters:
{Curve} c1
  JSXGraph curve building the floor where c2 rolls
{Curve} c2
  JSXGraph curve which rolls on c1.
{number} start_c1
  The parameter t such that c1(t) touches c2. This is the start position of the rolling process
{Number} stepsize
  Increase in t in each step for the curve c1
{Number} direction
{Number} time
  Delay time for setInterval()
{Array} pointlist
  Array of points which are rolled in each step. This list should contain all points which define c2 and gliders on c2.

Examples:

    // Line which will be the floor to roll upon.
    var line = board.create('curve', [function (t) { return t;}, function (t){ return 1;}], {strokeWidth:6});
    // Center of the rolling circle
    var C = board.create('point',[0,2],{name:'C'});
    // Starting point of the rolling circle
    var P = board.create('point',[0,1],{name:'P', trace:true});
    // Circle defined as a curve. The circle 'starts' at P, i.e. circle(0) = P
    var circle = board.create('curve',[
              function (t){var d = P.Dist(C),
                              beta = JXG.Math.Geometry.rad([C.X()+1,C.Y()],C,P);
                          t += beta;
                          return C.X()+d*Math.cos(t);
              },
              function (t){var d = P.Dist(C),
                              beta = JXG.Math.Geometry.rad([C.X()+1,C.Y()],C,P);
                          t += beta;
                          return C.Y()+d*Math.sin(t);
              },
              0,2*Math.PI],
              {strokeWidth:6, strokeColor:'green'});

    // Point on circle
    var B = board.create('glider',[0,2,circle],{name:'B', color:'blue',trace:false});
    var roll = board.createRoulette(line, circle, 0, Math.PI/20, 1, 100, [C,P,B]);
    roll.start() // Start the rolling, to be stopped by roll.stop()

{JXG.Board} dehighlightAll()
Remove highlighting of all elements.

Returns:
  {JXG.Board} Reference to the board.

{JXG.Board} displayInfobox(val)
Set infobox visible / invisible. It uses its property hiddenByParent to memorize its status. In this way, many DOM access can be avoided.

Parameters:
{Boolean} val
  true for visible, false for invisible

Returns:
  {JXG.Board} Reference to the board.

See:
  JXG.Board#updateInfobox

{JXG.Board} emulateColorblindness(deficiency)
Initializes color blindness simulation.

Parameters:
{String} deficiency
  Describes the color blindness deficiency which is simulated. Accepted values are 'protanopia', 'deuteranopia', and 'tritanopia'.

Returns:
  {JXG.Board} Reference to the board

finalizeAdding(obj)
After construction of the object the visibility is set and the label is constructed if necessary.

Parameters:
{Object} obj
  The object to add.

fullscreenListener(evt)
If fullscreen mode is toggled, the possible CSS transformations which are applied to the JSXGraph canvas have to be reread. Otherwise the position of upper left corner is wrongly interpreted.

Parameters:
{Object} evt
  fullscreen event object (unused)

{JXG.Board} fullUpdate()
Runs through all elements and calls their update() method and update the conditions. This is necessary after zooming and changing the bounding box.

Returns:
  {JXG.Board} Reference to the board

{String} generateId()
Generates unique id for a board. The result is randomly generated and prefixed with 'jxgBoard'.

Returns:
  {String} Unique id for a board.

{String} generateName(object)
Generates an unique name for the given object. The result depends on the objects type, if the object is a JXG.Point, capital characters are used, if it is of type JXG.Line only lower case characters are used. If object is of type JXG.Polygon, a bunch of lower case characters prefixed with P_ are used. If object is of type JXG.Circle the name is generated using lower case characters. prefixed with k_ is used. In any other case, lower case chars prefixed with s_ is used.

Parameters:
{Object} object
  Reference of an JXG.GeometryElement that is to be named.

Returns:
  {String} Unique name for the object.

{Boolean} gestureChangeListener(evt)
Triggered on iOS/Safari while the user inputs a gesture (e.g. pinch) and is used to zoom into the board. Works on iOS/Safari and Android.

Parameters:
{Event} evt
  Browser event object

Returns:
  {Boolean}

{Boolean} gestureStartListener(evt)
Called by iOS/Safari as soon as the user starts a gesture. Works natively on iOS/Safari, on Android we emulate it.

Parameters:
{Event} evt

Returns:
  {Boolean}

{Array} getAllObjectsUnderMouse(evt)
Collects all elements under current mouse position.

Parameters:
{Event} evt
  Event object containing the mouse coordinates.

Returns:
  {Array} Array of elements at the current mouse position.

See:
  JXG.Board#getAllUnderMouse

{Array} getAllUnderMouse(evt)
Collects all elements under current mouse position plus current user coordinates of mouse cursor.

Parameters:
{Event} evt
  Event object containing the mouse coordinates.

Returns:
  {Array} Array of elements at the current mouse position plus current user coordinates of mouse.

See:
  JXG.Board#getUsrCoordsOfMouse
  JXG.Board#getAllObjectsUnderMouse

{Array} getBoundingBox()
Get the bounding box of the board.

Returns:
  {Array} bounding box [x1,y1,x2,y2] upper left corner, lower right corner

{Array} getCoordsTopLeftCorner()
Calculates mouse coordinates relative to the boards container.

Returns:
  {Array} Array of coordinates relative the boards container top left corner.

{Array} getMousePosition(e, i)
Get the position of the pointing device in screen coordinates, relative to the upper left corner of the host tag.

Parameters:
{Event} e
  Event object given by the browser.
{Number} i Optional
  Only use in case of touch events. This determines which finger to use and should not be set for mouseevents.

Returns:
  {Array} Contains the mouse coordinates in screen coordinates, ready for JXG.Coords

<private> {Array} getScrCoordsOfMouse(x, y)
Returns the input parameters in an array. This method looks pointless and it really is, but it had a purpose once.

Parameters:
{Number} x
  X coordinate in screen coordinates
{Number} y
  Y coordinate in screen coordinates

Returns:
  {Array} Coordinates [x, y] of the mouse in screen coordinates.

See:
  JXG.Board#getUsrCoordsOfMouse

{Array} getUsrCoordsOfMouse(evt)
This method calculates the user coords of the current mouse coordinates.

Parameters:
{Event} evt
  Event object containing the mouse coordinates.

Returns:
  {Array} Coordinates [x, y] of the mouse in user coordinates.

See:
  JXG.Board#getScrCoordsOfMouse
  JXG.Board#getAllUnderMouse

Examples:

    board.on('up', function (evt) {
            var a = board.getUsrCoordsOfMouse(evt),
                x = a[0],
                y = a[1],
                somePoint = board.create('point', [x,y], {name:'SomePoint',size:4});
                // Shorter version:
                //somePoint = board.create('point', a, {name:'SomePoint',size:4});
            });

{Boolean} hasPoint(x, y)
Checks if the given point is inside the boundingbox.

Parameters:
{Number|JXG.Coords} x
  User coordinate or JXG.Coords object.
{Number} y Optional
  User coordinate. May be omitted in case `x` is a JXG.Coords object.

Returns:
  {Boolean}

{JXG.Board} highlightCustomInfobox(text, el)
Changes the text of the info box to what is provided via text.

Parameters:
{String} text
{JXG.GeometryElement} el Optional

Returns:
  {JXG.Board} Reference to the board.

{JXG.Board} highlightInfobox(x, y, el)
Changes the text of the info box to show the given coordinates.

Parameters:
{Number} x
{Number} y
{JXG.GeometryElement} el Optional
  The element the mouse is pointing at

Returns:
  {JXG.Board} Reference to the board.

{JXG.Board} initGeonextBoard()
Initialize some objects which are contained in every GEONExT construction by default, but are not contained in the gxt files.

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} initInfobox(attributes)
Initialize the info box object which is used to display the coordinates of points near the mouse pointer,

Parameters:
attributes

Returns:
  {JXG.Board} Reference to the board

{Array} initMoveObject(x, y, evt, type)
Collects all elements below the current mouse pointer and fulfilling the following constraints:

- isDraggable
- visible
- not fixed
- not frozen

Parameters:
{Number} x
  Current mouse/touch coordinates
{Number} y
  current mouse/touch coordinates
{Object} evt
  An event object
{String} type
  What type of event? 'touch', 'mouse' or 'pen'.

Returns:
  {Array} A list of geometric elements.

initMoveOrigin(x, y)
Initiate moving the origin. This is used in mouseDown and touchStart listeners.

Parameters:
{Number} x
  Current mouse/touch coordinates
{Number} y
  Current mouse/touch coordinates

keyDownListener(evt)
Allow moving of JSXGraph elements with arrow keys. The selection of the element is done with the tab key. For this, the attribute 'tabindex' of the element has to be set to some number (default=0). tabindex corresponds to the HTML and SVG attribute of the same name.

Panning of the construction is done with arrow keys if the pan key (shift or ctrl - depending on the board attributes) is pressed.

Zooming is triggered with the keys +, o, -, if the pan key (shift or ctrl - depending on the board attributes) is pressed.

Keyboard control (move, pan, and zoom) is disabled if an HTML element of type input or textarea has received focus.

Parameters:
{Event} evt
  The browser's event object

See:
  JXG.Board#keyboard
  JXG.Board#keyFocusInListener
  JXG.Board#keyFocusOutListener

keyFocusInListener(evt)
Event listener for SVG elements getting focus. This is needed for highlighting when using keyboard control. Only elements having the attribute 'tabindex' can receive focus.

Parameters:
{Event} evt
  The browser's event object

See:
  JXG.Board#keyFocusOutListener
  JXG.Board#keyDownListener
  JXG.Board#keyboard

keyFocusOutListener(evt)
Event listener for SVG elements losing focus. This is needed for dehighlighting when using keyboard control. Only elements having the attribute 'tabindex' can receive focus.

Parameters:
{Event} evt
  The browser's event object

See:
  JXG.Board#keyFocusInListener
  JXG.Board#keyDownListener
  JXG.Board#keyboard

{JXG.Board} migratePoint(src, dest, copyName)
Migrate the dependency properties of the point src to the point dest and delete the point src. For example, a circle around the point src receives the new center dest. The old center src will be deleted.

Parameters:
{JXG.Point} src
  Original point which will be deleted
{JXG.Point} dest
  New point with the dependencies of src.
{Boolean} copyName
  Flag which decides if the name of the src element is copied to the dest element.

Returns:
  {JXG.Board} Reference to the board

mouseClickListener(evt)
This method is called by the browser when the mouse device clicks on the screen.

Parameters:
{Event} evt
  The browsers event object.

mouseDblClickListener(evt)
This method is called by the browser when the mouse device double clicks on the screen.

Parameters:
{Event} evt
  The browsers event object.

{Boolean} mouseDownListener(evt)
This method is called by the browser when the mouse button is clicked.

Parameters:
{Event} evt
  The browsers event object.

Returns:
  {Boolean} True if no element is found under the current mouse pointer, false otherwise.

mouseMoveListener(evt)
This method is called by the browser when the mouse is moved.

Parameters:
{Event} evt
  The browsers event object.

mouseUpListener(evt)
This method is called by the browser when the mouse button is released.

Parameters:
{Event} evt

{Boolean} mouseWheelListener(evt)
Handler for mouse wheel events. Used to zoom in and out of the board.

Parameters:
{Event} evt

Returns:
  {Boolean}

moveObject(x, y, o, evt, type)
Moves an object.

Parameters:
{Number} x
  Coordinate
{Number} y
  Coordinate
{Object} o
  The touch object that is dragged: {JXG.Board#mouse} or {JXG.Board#touches}.
{Object} evt
  The event object.
{String} type
  Mouse or touch event?

{JXG.Board} moveOrigin(x, y, diff)
Moves the origin and initializes an update of all elements.

Parameters:
{Number} x
{Number} y
{Boolean} diff Optional, Default: false

Returns:
  {JXG.Board} Reference to this board.

<private> {null} originMoveEnd()
Stop moving the origin with one finger

Returns:
  {null} null

pointerClickListener(evt)
This method is called by the browser when a pointer device clicks on the screen.

Parameters:
{Event} evt
  The browsers event object.

pointerDblClickListener(evt)
This method is called by the browser when a pointer device double clicks on the screen.

Parameters:
{Event} evt
  The browsers event object.

{Boolean} pointerDownListener(evt, object, allowDefaultEventHandling)
This method is called by the browser when a pointing device is pressed on the screen.

Parameters:
{Event} evt
  The browsers event object.
{Object} object
  If the object to be dragged is already known, it can be submitted via this parameter
{Boolean} allowDefaultEventHandling Optional, Default: false
  If true event is not canceled, i.e. prevent call of evt.preventDefault()

Returns:
  {Boolean} false if the first finger event is sent twice, or not a browser, or in selection mode. Otherwise returns true.

{Boolean} pointerLeaveListener(evt)
Triggered by the pointerleave event. This is needed in addition to JXG.Board#pointerUpListener in the situation that a pen is used and after an up event the pen leaves the hover range vertically. Here, it happens that after the pointerup event further pointermove events are fired and elements get highlighted. This highlighting has to be cancelled.

Parameters:
{Event} evt

Returns:
  {Boolean}

{Boolean} pointerMoveListener(evt)
Called periodically by the browser while the user moves a pointing device across the screen.

Parameters:
{Event} evt

Returns:
  {Boolean}

{Boolean} pointerUpListener(evt)
Triggered as soon as the user stops touching the device with at least one finger.

Parameters:
{Event} evt

Returns:
  {Boolean}

{JXG.Board} prepareUpdate(drag)
Sets for all objects the needsUpdate flag to 'true'.

Parameters:
drag

Returns:
  {JXG.Board} Reference to the board

printListener(evt)
Update the container before and after printing.

Parameters:
{Event} evt Optional

printListenerMatch(mql)
Wrapper for printListener to be used in mediaQuery matches.

Parameters:
{MediaQueryList} mql

{JXG.Board} removeAncestors(object)
Removes the ancestors of an object an the object itself from board and renderer.

Parameters:
{JXG.GeometryElement} object
  The object to remove.

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} removeChild(board)
Deletes a board from the list of dependent boards.

Parameters:
{JXG.Board} board
  Reference to the board which will be removed.

Returns:
  {JXG.Board} Reference to the board

removeEventHandlers()
Remove all event handlers from the board object

removeFullscreenEventHandlers()
Remove all registered event handlers regarding fullscreen mode.

{JXG.Board} removeGrids()
Removes all grids assigned to this board. Warning: This method also removes all objects depending on one or more of the grids.

Returns:
  {JXG.Board} Reference to the board object.

{JXG.Board} removeHook(id)
Please use JXG.Board.off instead.

Parameters:
{Number|function} id
  The number you got when you added the hook or a reference to the event handler.

Returns:
  {JXG.Board} Reference to the board

removeKeyboardEventHandlers()
Remove all registered touch event handlers.

removeMouseEventHandlers()
De-register mouse event handlers.

{JXG.Board} removeObject(object, saveMethod)
Removes object from board and renderer.

Performance hints: It is recommended to use the object's id. If many elements are removed, it is best to call `board.suspendUpdate()` before looping through the elements to be removed and call `board.unsuspendUpdate()` after the loop. Further, it is advisable to loop in reverse order, i.e. remove the object in reverse order of their creation time.

Parameters:
{JXG.GeometryElement|Array} object
  The object to remove or array of objects to be removed. The element(s) is/are given by name, id or a reference.
{Boolean} saveMethod
  If true, the algorithm runs through all elements and tests if the element to be deleted is a child element. If yes, it will be removed from the list of child elements. If false (default), the element is removed from the lists of child elements of all its ancestors. This should be much faster.

Returns:
  {JXG.Board} Reference to the board

removePointerEventHandlers()
Remove MSPointer* Event handlers.

removeResizeEventHandlers()
Remove resize related event handlers

removeTouchEventHandlers()
Remove all registered touch event handlers.

{JXG.Board} resizeContainer(canvasWidth, canvasHeight, dontset, dontSetBoundingBox)
Change the height and width of the board's container. After doing so, JXG.JSXGraph.setBoundingBox is called using the actual size of the bounding box and the actual value of keepaspectratio. If setBoundingbox() should not be called automatically, call resizeContainer with dontSetBoundingBox == true.

Parameters:
{Number} canvasWidth
  New width of the container.
{Number} canvasHeight
  New height of the container.
{Boolean} dontset Optional, Default: false
  If true do not set the CSS width and height of the DOM element.
{Boolean} dontSetBoundingBox Optional, Default: false
  If true do not call setBoundingBox(), but keep view centered around original visible center.

Returns:
  {JXG.Board} Reference to the board

resizeListener()
Fallback solutions if there is no resizeObserver available in the browser. Reacts to resize events of the window (only). Otherwise similar to startResizeObserver(). To handle changes of the visibility of the JSXGraph container element, additionally an intersection observer is used. which watches changes in the visibility of the JSXGraph container element. This is necessary e.g. for register tabs or dia shows.

See:
  JXG.Board#startResizeObserver
  JXG.Board#startIntersectionObserver

<private> saveStartPos(obj, targets)
Helper function which returns a reasonable starting point for the object being dragged. Formerly known as initXYstart().

Parameters:
{JXG.GeometryElement} obj
  The object to be dragged
{Array} targets
  Array of targets. It is changed by this function.

scrollListener(evt)
Listener to watch for scroll events. Sets board._isScrolling = true

Parameters:
{Event} evt
  The browser's event object

See:
  JXG.Board#startResizeObserver
  JXG.Board#resizeListener

{JXG.GeometryElement|JXG.Composition} select(str, onlyByIdOrName)
Select a single or multiple elements at once.

Parameters:
{String|Object|function} str
  The name, id or a reference to a JSXGraph element on this board. An object will be used as a filter to return multiple elements at once filtered by the properties of the object.
{Boolean} onlyByIdOrName
  If true (default:false) elements are only filtered by their id, name or groupId. The advanced filters consisting of objects or functions are ignored.

Returns:
  {JXG.GeometryElement|JXG.Composition}

Examples:

    // select the element with name A
    board.select('A');

    // select all elements with strokecolor set to 'red' (but not '#ff0000')
    board.select({
      strokeColor: 'red'
    });

    // select all points on or below the x axis and make them black.
    board.select({
      elementClass: JXG.OBJECT_CLASS_POINT,
      Y: function (v) {
        return v <= 0;
      }
    }).setAttribute({color: 'black'});

    // select all elements
    board.select(function (el) {
      return true;
    });

{JXG.Board} setAttribute(attributes)
Sets an arbitrary number of attributes. This method has one or more parameters of the following types:

- object: {key1:value1,key2:value2,...}
- string: 'key:value'
- array: ['key', value]

Some board attributes are immutable, like e.g. the renderer type.

Parameters:
{Object} attributes
  An object with attributes.

Returns:
  {JXG.Board} Reference to the board

Examples:

    const board = JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-5, 5, 5, -5],
        keepAspectRatio: false,
        axis:true,
        showFullscreen: true,
        showScreenshot: true,
        showCopyright: false
    });

    board.setAttribute({
        animationDelay: 10,
        boundingbox: [-10, 5, 10, -5],
        defaultAxes: {
            x: { strokeColor: 'blue', ticks: { strokeColor: 'blue'}}
        },
        description: 'test',
        fullscreen: {
            scale: 0.5
        },
        intl: {
            enabled: true,
            locale: 'de-DE'
        }
    });

    board.setAttribute({
        selection: {
            enabled: true,
            fillColor: 'blue'
        },
        showInfobox: false,
        zoomX: 0.5,
        zoomY: 2,
        fullscreen: { symbol: 'x' },
        screenshot: { symbol: 'y' },
        showCopyright: true,
        showFullscreen: false,
        showScreenshot: false,
        showZoom: false,
        showNavigation: false
    });
    board.setAttribute('showCopyright:false');

    var p = board.create('point', [1, 1], {size: 10,
        label: {
            fontSize: 24,
            highlightStrokeOpacity: 0.1,
            offset: [5, 0]
        }
    });

{JXG.Board} setBoundingBox(bbox, keepaspectratio, setZoom)
Set the bounding box of the board.

Parameters:
{Array} bbox
  New bounding box [x1,y1,x2,y2]
{Boolean} keepaspectratio Optional, Default: false
  If set to true, the aspect ratio will be 1:1, but the resulting viewport may be larger.
{String} setZoom Optional, Default: 'reset'
  Reset, keep or update the zoom level of the board. 'reset' sets JXG.Board#zoomX and JXG.Board#zoomY to the start values (or 1.0). 'update' adapts these values accoring to the new bounding box and 'keep' does nothing.

Returns:
  {JXG.Board} Reference to the board

{String} setId(obj, type)
Composes an id for an element. If the ID is empty ('' or null) a new ID is generated, depending on the object type. As a side effect JXG.Board#numObjects is updated.

Parameters:
{Object} obj
  Reference of an geometry object that needs an id.
{Number} type
  Type of the object.

Returns:
  {String} Unique id for an element.

{JXG.Board} setZoom(fX, fY)
Sets the zoom level to `fX` resp `fY`.

Parameters:
{Number} fX
{Number} fY

Returns:
  {JXG.Board} Reference to the board.

{JXG.Board} showDependencies()
Lists the dependencies graph in a new HTML-window.

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} showXML()
Lists the XML code of the construction in a new HTML-window.

Returns:
  {JXG.Board} Reference to the board

<private> {JXG.Board} startFullscreenResizeObserver(node)
Start resize observer to handle orientation changes in fullscreen mode.

Parameters:
{Object} node
  DOM object which is in fullscreen mode. It is the wrapper element around the JSXGraph div.

Returns:
  {JXG.Board} Reference to the board

See:
  JXG.Board#toFullscreen

startIntersectionObserver()
Watch for changes of the visibility of the JSXGraph container element.

See:
  JXG.Board#startResizeObserver
  JXG.Board#resizeListener

startResizeObserver()
Start observer which reacts to size changes of the JSXGraph container div element. Calls updateContainerDims(). If not available, an event listener for the window-resize event is started. On mobile devices also scrolling might trigger resizes. However, resize events triggered by scrolling events should be ignored. Therefore, also a scrollListener is started. Resize can be controlled with the board attribute resize.

See:
  JXG.Board#updateContainerDims
  JXG.Board#resizeListener
  JXG.Board#scrollListener
  JXG.Board#resize

startSelectionMode()
Start selection mode. This function can either be triggered from outside or by a down event together with correct key pressing. The default keys are shift+ctrl. But this can be changed in the options. Starting from out side can be realized for example with a button like this:

    	<button onclick='board.startSelectionMode()'>Start</button>

Examples:

    //
    // Set a new bounding box from the selection rectangle
    //
    var board = JXG.JSXGraph.initBoard('jxgbox', {
            boundingBox:[-3,2,3,-2],
            keepAspectRatio: false,
            axis:true,
            selection: {
                enabled: true,
                needShift: false,
                needCtrl: true,
                withLines: false,
                vertices: {
                    visible: false
                },
                fillColor: '#ffff00',
            }
         });

    var f = function f(x) { return Math.cos(x); },
        curve = board.create('functiongraph', [f]);

    board.on('stopselecting', function(){
        var box = board.stopSelectionMode(),

            // bbox has the coordinates of the selection rectangle.
            // Attention: box[i].usrCoords have the form [1, x, y], i.e.
            // are homogeneous coordinates.
            bbox = box[0].usrCoords.slice(1).concat(box[1].usrCoords.slice(1));

            // Set a new bounding box
            board.setBoundingBox(bbox, false);
     });

{JXG.Board} stopAllAnimation()
Cancels all running animations.

Returns:
  {JXG.Board} Reference to the board

<private> {JXG.Board} stopFullscreenResizeObserver(node)
Remove resize observer to handle orientation changes in fullscreen mode.

Parameters:
{Object} node
  DOM object which is in fullscreen mode. It is the wrapper element around the JSXGraph div.

Returns:
  {JXG.Board} Reference to the board

See:
  JXG.Board#toFullscreen

stopIntersectionObserver()
Stop the intersection observer

See:
  JXG.Board#startIntersectionObserver

stopResizeObserver()
Stops the resize observer.

See:
  JXG.Board#startResizeObserver

{Array} stopSelectionMode()
Finalize the selection: disable selection mode and return the coordinates of the selection rectangle.

Returns:
  {Array} Coordinates of the selection rectangle. The array contains two JXG.Coords objects. One the upper left corner and the second for the lower right corner.

{Boolean} suppressDefault(e)
Suppresses the default event handling. Used for context menu.

Parameters:
{Event} e

Returns:
  {Boolean} false

{JXG.Board} suspendUpdate()
Stop updates of the board.

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} toFullscreen(id)
Expand the JSXGraph construction to fullscreen. In order to preserve the proportions of the JSXGraph element, a wrapper div is created which is set to fullscreen. This function is called when fullscreen mode is triggered and when it is closed.

The wrapping div has the CSS class 'jxgbox_wrap_private' which is defined in the file 'jsxgraph.css'

This feature is not available on iPhones (as of December 2021).

Parameters:
{String} id
  (Optional) id of the div element which is brought to fullscreen. If not provided, this defaults to the JSXGraph div. However, it may be necessary for the aspect ratio trick which using padding-bottom/top and an out div element. Then, the id of the outer div has to be supplied.

Returns:
  {JXG.Board} Reference to the board

Examples:

    <div id='jxgbox' class='jxgbox' style='width:500px; height:200px;'></div>
    <button onClick='board.toFullscreen()'>Fullscreen</button>

    <script language='Javascript' type='text/javascript'>
    var board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]});
    var p = board.create('point', [0, 1]);
    </script>

    <div id='outer' style='max-width: 500px; margin: 0 auto;'>
    <div id='jxgbox' class='jxgbox' style='height: 0; padding-bottom: 100%'></div>
    </div>
    <button onClick='board.toFullscreen('outer')'>Fullscreen</button>

    <script language='Javascript' type='text/javascript'>
    var board = JXG.JSXGraph.initBoard('jxgbox', {
        axis:true,
        boundingbox:[-5,5,5,-5],
        fullscreen: { id: 'outer' },
        showFullscreen: true
    });
    var p = board.create('point', [-2, 3], {});
    </script>

{Boolean} touchEndListener(evt)
Triggered as soon as the user stops touching the device with at least one finger.

Parameters:
{Event} evt

Returns:
  {Boolean}

{Boolean} touchMoveListener(evt)
Called periodically by the browser while the user moves his fingers across the device.

Parameters:
{Event} evt

Returns:
  {Boolean}

<private> {Boolean} touchOriginMove(evt)
Move the origin with one finger

Parameters:
{Object} evt
  Event from touchMoveListener

Returns:
  {Boolean} returns if the origin is moved.

{Boolean} touchStartListener(evt)
This method is called by the browser when a finger touches the surface of the touch-device.

Parameters:
{Event} evt
  The browsers event object.

Returns:
  {Boolean} ...

<private> {Boolean} touchStartMoveOriginOneFinger(evt)
Start moving the origin with one finger.

Parameters:
{Object} evt
  Event from touchStartListener

Returns:
  {Boolean} returns if the origin is moved.

twoFingerMove(p1, p2, o, evt)
Moves elements in multitouch mode.

Parameters:
{Array} p1
  x,y coordinates of first touch
{Array} p2
  x,y coordinates of second touch
{Object} o
  The touch object that is dragged: {JXG.Board#touches}.
{Object} evt
  The event object that lead to this movement.

twoFingerTouchObject(tar, drag, id)
Moves, rotates and scales a line or polygon with two fingers.

If one vertex of the polygon snaps to the grid or to points or is not draggable, two-finger-movement is cancelled.

Parameters:
{Array} tar
  Array containing touch event objects: {JXG.Board#touches.targets}.
{object} drag
  The object that is dragged:
{Number} id
  pointerId of the event. In case of old touch event this is emulated.

{JXG.Board} unsuspendUpdate()
Enable updates of the board.

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} update(drag)
Runs through most elements and calls their update() method and update the conditions.

Parameters:
{JXG.GeometryElement} drag Optional
  Element that caused the update.

Returns:
  {JXG.Board} Reference to the board

updateConditions()

{JXG.Board} updateContainerDims(width, height)
Update the width and height of the JSXGraph container div element. If width and height are not supplied, read actual values with offsetWidth/Height, and call board.resizeContainer() with this values.

If necessary, also call setBoundingBox().

Parameters:
{Number} width Optional, Default: this.containerObj.offsetWidth
  Width of the container element
{Number} height Optional, Default: this.containerObj.offsetHeight
  Height of the container element

Returns:
  {JXG.Board} Reference to the board

See:
  JXG.Board#startResizeObserver
  JXG.Board#resizeListener
  JXG.Board#resizeContainer
  JXG.Board#setBoundingBox

{JXG.Board} updateCoords()
Update the coords object of all elements which possess this property. This is necessary after changing the viewport.

Returns:
  {JXG.Board} Reference to this board.

updateCSSTransforms()
Update CSS transformations of type scaling. It is used to correct the mouse position in JXG.Board.getMousePosition. The inverse transformation matrix is updated on each mouseDown and touchStart event. It is up to the user to call this method after an update of the CSS transformation in the DOM.

{JXG.Board} updateElements(drag)
Runs through all elements and calls their update() method.

Parameters:
{JXG.GeometryElement} drag
  Element that caused the update.

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} updateHooks(m)
Runs through all hooked functions and calls them.

Parameters:
m

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} updateInfobox(el)
Updates and displays a little info box to show coordinates of current selected points.

Parameters:
{JXG.GeometryElement} el
  A GeometryElement

Returns:
  {JXG.Board} Reference to the board

See:
  JXG.Board#displayInfobox
  JXG.Board#showInfobox
  Point#showInfobox

{JXG.Board} updateRenderer()
Runs through all elements and calls their update() method.

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} updateRendererCanvas()
Runs through all elements and calls their update() method. This is a special version for the CanvasRenderer. Here, we have to do our own layer handling.

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} zoom100()
Reset the zoom level to the original zoom level from initBoard(); Additionally, if the board as been initialized with a boundingBox (which is the default), restore the viewport to the original viewport during initialization. Otherwise, (i.e. if the board as been initialized with unitX/Y and originX/Y), just set the zoom level to 100%.

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} zoomAllPoints()
Zooms the board so every visible point is shown. Keeps aspect ratio.

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} zoomElements(elements)
Reset the bounding box and the zoom level to 100% such that a given set of elements is within the board's viewport.

Parameters:
{Array} elements
  A set of elements given by id, reference, or name.

Returns:
  {JXG.Board} Reference to the board.

{JXG.Board} zoomIn(x, y)
Zooms into the board by the factors board.attr.zoom.factorX and board.attr.zoom.factorY and applies the zoom. The zoom operation is centered at x, y.

Parameters:
{Number} x Optional
{Number} y Optional

Returns:
  {JXG.Board} Reference to the board

{JXG.Board} zoomOut(x, y)
Zooms out of the board by the factors board.attr.zoom.factorX and board.attr.zoom.factorY and applies the zoom. The zoom operation is centered at x, y.

Parameters:
{Number} x Optional
{Number} y Optional

Returns:
  {JXG.Board} Reference to the board

Event Detail
attribute(e)
Whenever the JXG.Board#setAttribute is called.

Parameters:
{Event} e
  The browser's event object.

boundingbox()
The bounding box of the board has changed.

click(e)
Whenever the user clicks on the board.

Parameters:
{Event} e
  The browser's event object.

See:
  JXG.Board#clickDelay

dblclick(e)
Whenever the user double clicks on the board. This event works on desktop browser, but is undefined on mobile browsers.

Parameters:
{Event} e
  The browser's event object.

See:
  JXG.Board#clickDelay
  JXG.Board#dblClickSuppressClick

down(e)
Whenever the user starts to touch or click the board.

Parameters:
{Event} e
  The browser's event object.

hit(e, el, target)
Whenever an element is highlighted this event is fired.

    var c = board.create('circle', [[1, 1], 2]);
    board.on('hit', function(evt, el) {
        console.log('Hit element', el);
    });

Parameters:
{Event} e
  The browser's event object.
{JXG.GeometryElement} el
  The hit element.
target

keymove(e, mode)
This event is fired whenever the user is moving an element over the board by pressing arrow keys on a keyboard.

Parameters:
{Event} e
  The browser's event object.
{Number} mode
  The mode the board currently is in

See:
  JXG.Board#mode

mouseclick(e)
Whenever the user clicks on the board with a mouse device.

Parameters:
{Event} e
  The browser's event object.

mousedblclick(e)
Whenever the user double clicks on the board with a mouse device.

Parameters:
{Event} e
  The browser's event object.

See:
  JXG.Board#clickDelay

mousedown(e)
Whenever the user starts to click on the board.

Parameters:
{Event} e
  The browser's event object.

mousehit(e, el, target)
Whenever an element is highlighted this event is fired.

Parameters:
{Event} e
  The browser's event object.
{JXG.GeometryElement} el
  The hit element.
target

See:
  JXG.Board#hit

mousemove(e, mode)
This event is fired whenever the user is moving the mouse over the board.

Parameters:
{Event} e
  The browser's event object.
{Number} mode
  The mode the board currently is in

See:
  JXG.Board#mode

mousemoveselecting()
A move event while selecting of a region is active from a device sending mouse events.

mousestartselecting()
Select a region is started during a down event from a device sending mouse events or by calling JXG.Board.startSelectionMode.

mousestopselecting()
Selection of a region is stopped during an up event from a device sending mouse events.

mouseup(e)
Whenever the user releases the mousebutton over the board.

Parameters:
{Event} e
  The browser's event object.

move(e, mode)
This event is fired whenever the user is moving the finger or mouse pointer over the board.

Parameters:
{Event} e
  The browser's event object.
{Number} mode
  The mode the board currently is in

See:
  JXG.Board#mode

moveselecting()
A move event while selecting of a region is active.

pendown(e)
Whenever the user taps the pen on the board.

Parameters:
{Event} e
  The browser's event object.

penmove(e, mode)
This event is fired whenever the user is moving the pen over the board.

Parameters:
{Event} e
  The browser's event object.
{Number} mode
  The mode the board currently is in

See:
  JXG.Board#mode

pointerclick(e)
Whenever the user clicks on the board with a pointer device.

Parameters:
{Event} e
  The browser's event object.

pointerdblclick(e)
Whenever the user double clicks on the board with a pointer device. This event works on desktop browser, but is undefined on mobile browsers.

Parameters:
{Event} e
  The browser's event object.

See:
  JXG.Board#clickDelay

pointerdown(e)
Whenever the user starts to click on the board with a device sending pointer events.

Parameters:
{Event} e
  The browser's event object.

pointermove(e, mode)
This event is fired whenever the user is moving the mouse over the board with a device sending pointer events.

Parameters:
{Event} e
  The browser's event object.
{Number} mode
  The mode the board currently is in

See:
  JXG.Board#mode

pointermoveselecting()
Select a region is started during a down event from a device sending mouse events.

pointerstartselecting()
Select a region is started during a down event from a device sending pointer events or by calling JXG.Board.startSelectionMode.

pointerstopselecting()
Selection of a region is stopped during an up event from a device sending pointer events.

pointerup(e)
Whenever the user releases the mousebutton over the board with a device sending pointer events.

Parameters:
{Event} e
  The browser's event object.

startselecting()
Select a region is started during a down event or by calling JXG.Board.startSelectionMode

stopselecting()
Selection of a region is stopped during an up event.

touchend(e)
Whenever the user stops touching the board.

Parameters:
{Event} e
  The browser's event object.

touchmove(e, mode)
This event is fired whenever the user is moving the finger over the board.

Parameters:
{Event} e
  The browser's event object.
{Number} mode
  The mode the board currently is in

See:
  JXG.Board#mode

touchmoveselecting()
Select a region is started during a down event from a device sending touch events.

touchstart(e)
Whenever the user starts to touch the board.

Parameters:
{Event} e
  The browser's event object.

touchstartselecting()
Select a region is started during a down event from a device sending touch events or by calling JXG.Board.startSelectionMode.

touchstopselecting()
Selection of a region is stopped during an up event from a device sending touch events.

up(e)
Whenever the user stops to touch or click the board.

Parameters:
{Event} e
  The browser's event object.

update()
This board is updated.

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