Mouse Button Drag Tracking in Javascript

HTML5 Canvas:

Event log: (code adapted from Jan Wolter)
Clear event log
One of the first obstacles you’ll encounter when trying to use HTML5 Canvas for interactive graphics experiments is that mouse button drag tracking is badly broken. First, there isn’t uniformity across browsers even for the numbering of the mouse buttons. Second, once the mouse leaves the canvas element itself, you get no more mouse events, so you won’t even hear about a mouseup event that ends a drag if it happens outside the canvas.
Continue reading

A Fluid Simulation in Javascript for the HTML5 Canvas

Show FPS

I wrote a small iPhone app a little while ago called FireWater, for which I developed a simple pressure-based fluid simulation.

I thought it would be fun to port it to the HTML5 Canvas in Javascript to learn the Canvas myself and teach a little about writing simulations.

If your browser supports the HTML5 Canvas element (Chrome, Safari, Firefox, Opera, IE9) you should see the canvas above filled with black. Once you have a black canvas, click and drag on it to see it in action.

The GitHub repository for the source can be found here.