JSXGraph test

Template for JSXGraph

HTML

<script src="https://cdn.jsdelivr.net/npm/jsxgraph@1.1.0/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsxgraph@1.1.0/distrib/jsxgraph.css">
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px">
</div>

JavaScript

const dashoffset = 0;
const dasharray = 0.5;
const dashratio = 0.2;



JXG.Options.text.display = 'internal';
JXG.Options.board.defaultAxes.y = {
	name: 'y',
	ticks: {
		label: {
			visible: false, //'inherit',
			anchorX: 'right',
			anchorY: 'middle',
			fontSize: 12,
			offset: [-6, 0]
		},
		tickEndings: [1, 0],
		drawZero: false,
		visible: 'inherit',
		majorHeight: 10,
		minorTicks: 0,
	}
};

const b = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-0.1, 1.1, 1.1, -0.1], axis:true,
	showNavigation:false, showCopyright:false
});

b.create('functiongraph', [
	function(x){
		// Formula taken from fragment shader:
		return Math.ceil(
			((x + dashoffset) % dasharray)
			- (dasharray * dashratio)
		);
	},
	0,
	1
], {
	withLabel: true,
	name:'Alpha value of fragment',
	label: {
		strokeColor:'red',
	},
	strokeColor:'red',
	strokeWidth: 3
});

var li = b.create('line', [[1,0], [1,1]], {
	strokeColor: '#aaaaaa'
});

// Rotate text around the lower left corner (-2,-1) by 30 degrees.
b.create('transform', [90.0*Math.PI/180.0, -0.05,0.1], {type:'rotate'}).bindTo(
	b.create('text',[-0.05,0.1, 'Start of line'], {
		fontSize: 18,
		strokeColor: '#aaaaaa'
	})
);

// Rotate text around the lower left corner (-2,-1) by 30 degrees.
b.create('transform', [90.0*Math.PI/180.0, 1.05,0.1], {type:'rotate'}).bindTo(
	b.create('text',[1.05,0.1, 'End of line'], {
		fontSize: 18,
		strokeColor: '#aaaaaa'
	})
);
b.update();