JSXGraph introductory tutorial (3.1)-plotting area

From https://ipesek.github.io/jsxgraphbook/3_1_board.html

Plot area

JSXGraph needs the canvas as a place to expand and build. Because we have HTML and JavaScript,
We need an element in HTML to allow JavaScript to act as a canvas. First of all, we need to move a place in the HTML, and start our construction here.
We will use div elements with specific attributes for this purpose.

<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div>

We can see some properties from the above line of code. Among them,'id=jxgbox' is very important to us, and that is what we use to connect to JSXGraph.
The next'class=jxgbox' is used to declare the appearance of our artboard. This is a relatively advanced topic and we will discuss it later.
The last attribute is'style=”width:500px; height:200px;"', which is used to define the size of our artboard.

key point of 1610efede8acca: here we did not define our own coordinate system, just the size of the canvas.

After we define the canvas, we need to interface it with JSXGraph. This can be achieved by the following code. It needs to be placed in a'<script></script>' tag.

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

You can see that it calls the initBoard function to build the drawing board. This function requires at least one parameter. In the above example, id is the div element of'jxgbox'.
'boundingbox: [-5, 2, 5, -2]' sets the boundary of the constructed coordinate system.

Observing the above two lines of code, we can see that there are two size definitions. For the div element, we created a canvas whose size is a specific pixel value.
Then we declared a coordinate system and its size for placing objects on the drawing board.