JSXGraph distinguishes two types of texts: display:'html'
and display:'internal'
. The former type of text element uses an HTML tag and is always strictly "above" any JSXGraph construction (and thus ignores the layer structur). The latter type of text element obeys the layer structure. The default is display:'html'
.
Here is an example (https://jsfiddle.net/8xms49pu/2/):
var circ = board.create('circle', [[0, 0], 3],
{fillColor: 'yellow', fillOpacity: 0.8});
var txt1 = board.create('text', [1, 1, 'HTML'], {layer: 1});
var txt1 = board.create('text', [-3.2, -1, 'internal'],
{layer: 1, display: 'internal'});
Images can be put into layers. This means, one also has to use display:'internal'
. Here is an example (https://jsfiddle.net/jdw7z1nq/1/):
var im = board.create('image', ['https://jsxgraph.org/wp/img/logo_tw.png', [-3, -3], [6, 6]],
{layer: 10});
var circ = board.create('circle', [[0,0], 3],
{fillColor: 'yellow', layer: 6});
var txt = board.create('text', [1, 1, 'Hello'],
{layer: 5, display: 'internal'});
The advantage of HTML texts is that they can contain any kind HTML content, for example MathJax or form tags or images, ... So, you might also consider putting the image into a text element.