Here are a variety of examples I have programmed that use HTML5 and Canvas to draw interactive diagrams.
stacked graphs: This is a simple, interactive stacked graphs plotting: the order of the graphs can be changed.
tangent line: This draws a typical polynomial curve, showing a tangent line. It is interactive; the tangent line can be moved along the curve to show how the slope changes from point to point.
inflection point: This is similar to the tangent line app, but demonstrates what an inflection point on a curve is (the point of maximum slope, in this example).
circles-hyperbola: This app was inspired by an animated GIF I saw posted by Steven Strogatz (@stevenstrogatz) on Twitter on August 27, 2014; the GIF was by Matthew Henderson (blog.matthen.com; see his Archive for June, 2011). It shows two expanding circles whose intersections trace out a hyperbola; my version is interactive, drawing the circles when and where the user clicks.
cycloid: This app demonstrates how a point on a wheel traces out a curve known as a cyloid, as the wheel is rolled along a line.
trochoid: This app is similar to the cycloid app, but allows the user to move the drawing point on the wheel inwards or outwards on its spoke, to change the curve being drawn. The result is a trochoid curve (either a cycloid, a curtate cycloid, or a prolate cycloid).
epsilon-delta: This app demonstrates the epsilon-delta definition of a limit in calculus. The user can change the values of epsilon and delta, and see what this looks like on the graph of a simple function.
Koch fractal curve: This app draws a simple fractal curve. The app shows each generation of the curve as it is built. The curve can be modified by moving any of the three control points of a "generator" polygon. The fractal dimension of the curve is shown.
Mesolabium (square root finder): This app simulates a simplified version of the mesolabium of Eratosthenes (3rd century BCE). This is an ancient device resembling a slide rule that finds square roots.Mesolabium (cube root finder) This app simulates the full version of the mesolabium of Eratosthenes, which finds cube roots. (This was his solution of the Delian problem of doubling the cube.) This app is based on a description of the device found in David Burton, A History of Mathematics, Seventh Edition.
An interactive plot: faithful. This plot is interactive in that points display information if you mouse-over them. The idea is that the user can examine outliers or other interesting points. These graphs were written by an R program, so if an R user or programmer wished to plot other datasets, they can quickly produce interactive plots of this kind. (The "faithful" data is a well-known dataset giving eruption duration and waiting times for Old Faithful Geyser.) The source code for this project is available at Github: https://github.com/wclang/xy_plot_js.
Another interactive plot: test_plot. This plot shows two simulated datasets plotted on top of each other, but it gives the user the ability to toggle between the datasets. The plot is also interactive in that moving the mouse over a point results in information being displayed about the point. This plot was produced by an R program, and like the previous example, an R programmer can use the program to quickly produce scatter plots of this kind (comparing two desired datasets). The source code for this project is available at Github: https://github.com/wclang/xy_plot_compare_js.
Unfortunately, there are some issues with MathJax, especially in using it to place mathematical notation into Canvas diagrams or pictures. It seems to work but you may find mathematical notation is not the correct size or in the correct location in a diagram. Another problem: the MathJax consortium announced in spring of 2017 that it would no longer host the library, so links to it may become broken here.
Here is a simple demonstration of the slide deck template that gives information on how it works and how to use it to author slide shows.
Here is a more elaborate presentation: a calculus lecture. This might or might not work well in all browsers, but it might show the potential of this slide show template for producing more elaborate documents.
WebGL allows programming high-quality three-dimensional graphics in web documents. It encapsulates OpenGL. However, it is challenging to program, so certain libraries are used for graphics programming that make it much easier to program graphics. Here, I have created several simple applications that use the popular library three.js. These are rather rough; I'm still learning how to use this. But this library is extremely powerful, and can be used to produce interactive, three-dimensional diagrams or other applications for communicating mathematical ideas. (Of course, a primary interest for many developers in this is the programming of three-dimensional games, which have high requirements for interactivity, performance, and visual attractiveness.)
A simple example of a WebGL app I've programmed': a graph of a paraboloid. This renders the graph of this surface in three dimensions, allowing the user to rotate the surface using the mouse.
A simple model of an icosahedron showing how it's constructed. This shows three rectangles that intersect each other at right angles. The corners of the rectangles form the vertices of the icosahedron (which is shown as a red wire frame). The isocahedron has 20 faces, 30 edges, and 12 vertices. Each face is an equilateral triangle. (To make the icosahedron regular, the three rectangles each have sides in the ratio of the golden ratio.)
A WebGL Moebius strip. A real-life Moebius strip is made by taking a long rectangular strip of paper, twisting one end 180 degrees, and gluing the ends together to form a loop. The version here was made from a rectangular strip that is yellow on one side, and blue on the other.
A second version of the WebGL Moebius strip has a red sphere tracing its edge. Moebius strips are remarkable in having only one edge (not two edges), and the red sphere demonstrates this: it never leaves the edge, yet ends up tracing the entire edge.
A third version of the WebGL Moebius strip has a red sphere tracing its side. Moebius strips also have the remarkable property of having only one side, and the red sphere demonstrates this: it traces the entire side, never leaving the surface, yet visiting the entire side.
Here, I've posted my first several dweets. But these are self-contained: I wrote a small template html page that (as best as I can tell) will run dweets exactly as on the dwitter site itself. See the source code to see how this works; the dweet itself is the body of the function
Here are some dweets I've written:
The idea here is to render simple 3D geometries in a 2D drawing context (in HTML5/Canvas), using my own simple 'hand-made' projection functions. (These follow the simple scheme described in the first several pages of Alan Watt and Matt Watt, Advanced Animation and Rendering Techniques, Addison-Wesley 1992.)
While the renderings are very simple (no hidden lines or surfaces, or shading), my hope is that this will enable an author to create simple animated or interactive 3D diagrams, without the difficulty of a sophisticated rendering framework such as WebGL/three.js.
The first app is simple: it shows a rotating wireframe icosahedron. It does little more than demonstrate the 3D-to-2D projection; see the source code for the surprisingly simple functions that do this.