Loci: Developers

Open Standards, Web-Based Mathlets: Making Interactive Tutorials Using the HTML5 canvas Element

by Shane Steinert-Threlkeld (Johns Hopkins Univ.) and J. Tilak Ratnanather (Johns Hopkins Univ.)

Abstract

Interactive math tutorials, often called mathlets, are designed to provide a more visceral learning experience than traditional textbook methods and to enhance intuitive understanding of complex ideas by allowing users to alter parameters that influence visual scenes. We describe methods for creating such tutorials using the HTML5 canvas element. First, we discuss some motivations for writing such mathlets, then walk-through the process of creating a mathlet with canvas. Then, we compare canvas to alternatives, explaining our decision to use it, and provide links to other demonstrations and resources.

Read full article text

Table of Contents

1. Preliminaries
2. Case Study: Osculating Circle
   1. The Mathlet
   2. Setting up the HTML Document
   3. Getting the 2D Context
   4. Coordinate Systems and Transformations
   5. Drawing Lines and Functions
      1. Notes on Functions in Javascript
   6. Drawing the Initial Osculating Circle
      1. Rectangles and Redrawing
   7. Colors and Styles
   8. Adding Interactivity via Slider
3. Comparison of canvas to Alternative Options
   1. Implementation Requirements and the Choice to Use canvas
   2. Browser Support for canvas
      1. canvas in Internet Explorer via excanvas
4. What Else is Possible With canvas
   1. More Advanced Mathematical Demos
   2. Other Examples
5. Resources About the canvas Element
6. Conclusions
7. Acknowledgements

This article requires JavaScript to be enabled in your browser.  The article discusses browser support for the HTML5 canvas element.

This article uses jsMath, which requires JavaScript, to process the mathematics expressions. If your browser supports JavaScript, be sure it is enabled. Once the jsMath scripts are running, clicking the "jsMath" button in the lower right corner of the browser window brings up a panel with configuration options and links to documentation and download pages, including instructions for installing missing mathematics fonts.