| Credits | Overview | Plotting Styles | Commands | Terminals |
|---|
The canvas terminal creates a set of javascript commands that draw onto the HTML5 canvas element. Syntax:
set terminal canvas {size <xsize>, <ysize>} {background <rgb_color>}
{font {<fontname>}{,<fontsize>}} | {fsize <fontsize>}
{{no}enhanced} {linewidth <lw>}
{rounded | butt | square}
{dashlength <dl>}
{standalone {mousing} | name '<funcname>'}
{jsdir 'URL/for/javascripts'}
{title '<some string>'}
where <xsize> and <ysize> set the size of the plot area in pixels. The default size in standalone mode is 600 by 400 pixels. The default font size is 10.
NB: Only one font is available, the ascii portion of Hershey simplex Roman provided in the file canvastext.js. You can replace this with the file canvasmath.js, which contains also UTF-8 encoded Hershey simplex Greek and math symbols. For consistency with other terminals, it is also possible to use font "name,size". Currently the font name is ignored, but browser support for named fonts is likely to arrive eventually.
The default standalone mode creates an html page containing javascript code that renders the plot using the HTML 5 canvas element. The html page links to two required javascript files 'canvastext.js' and 'gnuplot_common.js'. An additional file 'gnuplot_dashedlines.js' is needed to support dashed lines. By default these point to local files, on unix-like systems usually in directory /usr/local/share/gnuplot/<version>/js. See installation notes for other platforms. You can change this by using the jsdir option to specify either a different local directory or a general URL. The latter is usually appropriate if the plot is exported for viewing on remote client machines.
All plots produced by the canvas terminal are mouseable. The additional keyword mousing causes the standalone mode to add a mouse-tracking box underneath the plot. It also adds a link to a javascript file 'gnuplot_mouse.js' and to a stylesheet for the mouse box 'gnuplot_mouse.css' in the same local or URL directory as 'canvastext.js'.
The name option creates a file containing only javascript. Both the javascript function it contains and the id of the canvas element that it draws onto are taken from the following string parameter. The commands
set term canvas name 'fishplot'
set output 'fishplot.js'
will create a file containing a javascript function fishplot() that will draw onto a canvas with id=fishplot. An html page that invokes this javascript function must also load the canvastext.js function as described above. A minimal html file to wrap the fishplot created above might be:
<html>
<head>
<script src="canvastext.js"></script>
<script src="gnuplot_common.js"></script>
</head>
<body onload="fishplot();">
<script src="fishplot.js"></script>
<canvas id="fishplot" width=600 height=400>
<div id="err_msg">No support for HTML 5 canvas element</div>
</canvas>
</body>
</html>
The individual plots drawn on this canvas will have names fishplot_plot_1, fishplot_plot_2, and so on. These can be referenced by external javascript routines, for example gnuplot.toggle_visibility("fishplot_plot_2").