The <canvas> element has been introduced in HTML5 to draw graphics via JavaScript. This element may be more convenient than SVG in situations where you want to generate schemas dynamically. For example demos/5-canvas.html shows the typical graphs associated to a RLC circuit that are automatically updated when the user changes the frequency of the current. It is also possible to use WebGL [WebGL], opening the possibility to draw 3D scientific schemas. For example chemdoodle relies on WebGL to provide 3D representation of chemical structures.
Similarly to SVG, 2D/3D scientific schemas created via the <canvas> might require mathematical formulas. This is possible since we saw in section 1.2 that MathML can be inserted in SVG via a <foreignObject> and moreover SVG images can be inserted in both the CanvasRenderingContext2D and WebGLRenderingContext. One can for example use TeXZilla’s toImage function to generate such SVG images dynamically. For instance, the page demos/6-mathml-in-webgl.html shows an example of a 3D schemas for the magnetic field of a circular current loop. Again, see [Wang1] for more examples.
One of the recent HTML5 features that is currently being implemented in Web rendering engines is Web Components [WebComponents]. The idea is to allow Web developers to create their own custom HTML elements. These elements are made of the so-called shadow tree, which is an “internal” representation from basic elements and CSS style to which we attach some behaviors with DOM events and Javascript. This is typically useful to create some reusable widgets. Mozilla’s Brick project is a collection of such elements and contains many demos [Moz6]. Web Components are currently not fully implemented natively in browsers but some polyfill libraries like X-Tag allows to emulate their behavior [Moz6].
Web components can obviously be very helpful to design user inteface for sciencific Web app. For example, the specific interactive drawing of demos/5-canvas.html for RLC circuits could become a generic widget <x-graph> to draw scientific graphs with some user interface to configure the curve parameters. As a proof-of-concept, we have used the X-Tag library to create a custom <x-tex> tag. The behavior is simply to automatically converts its LaTeX content into MathML using TeXZilla, see demos/7-web-component.html. The Mozilla MathML team is following the developments in Web components and plans to create more custom elements for sciencific web apps, so that Web developers can reuse them.