Saving a graph as .png file

[Cleonis]

There is documentation from 2012 according to which a board can also be rendered as an HTML 'canvas' element, and when rendered as 'canvas' element the board can be saved as .png file.

https://jsxgraph.uni-bayreuth.de/wp/2012/11/02/howto-export-jsxgraph-constructions/

Is that documentation still applicable?

The reason I ask:

I added the JXG.Options declaration that is stated in that documentation.

JXG.Options.renderer = 'canvas';

For completeness: I saved the .js file, opened the page in a browser, used ctrl F5 to flush the browser cache.

I then opened the developer tools of the browser and I checked how the board was rendered. It was rendered as SVG

So my question is: is rendering as the 'canvas' element still supported?

If it is still supported, what is the syntax for declaring that the board is to be rendered as the 'canvas' element?

Cleon Teunissen

[Cleonis]

As often happens, minutes after posting the question i found a lead. It was in the answer to the following unrelated question:

https://stackoverflow.com/questions/37807206/jsxgraph-elements-disappearing

I noticed that among the attributes of the 'board' element the 'renderer' can be declared. So I tried:
JXG.Options.board.renderer = 'canvas';
I confirmed by checking in the developer tools that with that declaration the board is rendered as a 'canvas' element.

This brings me to the next step.
Is it possible to save that 'canvas' element as a .png file?

I'm testing with Firefox and Google Chromium. When I right-click on an actual image the browser opens the context menu, among the options is saving the image. When I right-click on a canvas rendered JSXGraph board no menu opens; apparently it is not supported. For instance, it could be that today's browser don't support a context menu for that.


Cleon Teunissen

[Alfred Wassermann]

JSXGraph disables the right click, i.e. the event "oncontextmenu".

It took a while until I found an easy workaround: just call

    board.containerObj.oncontextmenu = null;

after initialising the board.

Best wishes,

Alfred

[Cleonis]

Hi Alfred,

I have confirmed that with the call:
  board.containerObj.oncontextmenu = null;
the context menu is enabled again.

Out of curiosity: what may have been the reason for disabling the right click?

The changelog gives for the changes of 0.99.6
bug fixes: hide context menu

Incidentally:
After I had confirmed it dawned on me that the Firefox browser already has me covered. Firefox has versatile screenshot support. Depending on where you hover the mouse Firefox frames a div to capture. So you get consistently the same width and height. You can hit pretty much any div

I surmise it is the *browser* that provides the functionality to save a canvas rendered element as .png file.

That is: I surmise JSXGraph has no control over how the .png file comes out.

(For the purpose of testing: as far as I can tell rightclicking cannot be tested using JSFiddle, since JSFiddle uses frames. If I rightclick in JSFiddle I get the context menu for a frame.)

I uploaded a test graph:
This graph is set to be rendered as canvas element, and context menu is enabled
http://cleonis.nl/physics/sandbox_jsxgraph/graphlet_test_rightclick.html

This layout has two JSX boards side by side, each 256 by 256px

When I rightclick on a graph and save:

the .png file that is produced is 512x512 instead of 256x256, and the background color is set to transparent.

I suppose JSXGraph sets the background color at the HTML/CSS level, and not at the graph rendering level, so that when a canvas element is saved as .png file the background is always transparent.

It's not clear to me why the HTML 'canvas' element even exists: as far as I can tell there are no websites that use canvas rendering. There are webpages where it is described how the 'canvas' element can be used, but even those webpages do not actually use the 'canvas' element, they use straightforward images. It seems the 'canvas' element doesn't serve any purpose.

Cleon Teunissen