JSX Graph Canvas

by pratheeshrussellacs

HTML

<script src="https://cdn.jsdelivr.net/npm/jsxgraph@1.2.2/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsxgraph@1.2.2/distrib/jsxgraph.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
 <div id="jxgbox" class="jxgbox" style="width:400px; height:400px; float:left"></div><br>

JavaScript

const _ = window._;
//TRY HIDING/SHOWING THW GRID
let showGrid = true;

let arrayCoords = [];
let firstDraw = false;
var axesFunction = function(){
    var xaxis = board.create('axis',
	[ [0,0],[1,0] ], {
	 label: {offset: [7, -10]}, // Doesn't do anything here.
	 drawZero:false // Doesn't do anything here.
	}
); 


xaxis.removeAllTicks();
board.create('ticks', [xaxis, 1], { // The number here is the distance between Major ticks
	strokeColor:'#ccc',
	majorHeight:-1, // Need this because the JXG.Options one doesn't apply
	drawLabels:true, // Needed, and only works for equidistant ticks
	label: {offset: [-12, -10]},
	minorTicks:5, // The NUMBER of small ticks between each Major tick
	drawZero:true
 }
);
var yaxis = board.create('axis',	[ [0,0],[0,1] ]);
yaxis.removeAllTicks();
board.create('ticks', [yaxis, 1], {
	strokeColor:'#ccc',
	majorHeight:-1, // Need this because the JXG.Options one doesn't apply
	drawLabels:true, // Only works for equidistant ticks
	label: {offset: [7, -2]},
	minorTicks:1, // The NUMBER of small ticks between each Major tick
	drawZero:false
 }
);
};

let getMouseCoords = function(e, i) {
  var cPos = board.getCoordsTopLeftCorner(e, i),
      absPos = JXG.getPosition(e, i),
      dx = absPos[0]-cPos[0],
      dy = absPos[1]-cPos[1];

  return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);
}
let down = function(e) {
  firstDraw = false;
  let  i, coords;

  if (e[JXG.touchProperty]) {
      // index of the finger that is used to extract the coordinates
      i = 0;
  }
  
  coords = getMouseCoords(e, i);

  arrayCoords.splice(0,arrayCoords.length)
  arrayCoords.push(Math.round(coords.scrCoords[1]), Math.round(coords.scrCoords[2]));//arrayCoords.push(temp[1]);


  drawoncanvas();//call function

}


//JXG.Options.renderer = 'canvas';
//SETUP BOARD
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10,10,10,-10], axis: false,
    showCopyright: false,grid:false,renderer:'canvas'
});
if(showGrid){
    board.addGrid();...