The site Lutz Roeder’s HTML5 Samples contains three code samples, all written in JavaScript using the HTML5 canvas element. The source is available via GitHub.

The most complex of the samples is Textor, a text editor with syntax highlighting. Instead of editing the text using the HTML DOM, Textor renders text directly into a HTML5 canvas element while handling key and mouse events using JavaScript code.

On top of that it provides syntax highlighting for HTML, JavaScript and CSS and also supports mixed language HTML/JavaScript text. Textor works in IE9, Chrome, Safari and Firefox on both Windows and Mac.

The code includes an undo stack implementation, an incremental tokenizer for syntax highlighting, text input for different browsers and incremental screen invalidation. Textor is lightweight with only 47kB of compressed JavaScript in the main texteditor.js module.

Graphic 1 Lutz Roeders HTML5 Samples Using The Canvas Element

Digger, another sample, is a Boulderdash-style game, again entirely written in JavaScript and using the HTML5 canvas and audio elements. The game fits entirely into one 50kB module with less than 1200 lines of code, including the graphics and sounds encoded as base64 streams. The game is 100% ported from a Silverlight version with exactly the same graphics and functionality.

PastedGraphic 8 Lutz Roeders HTML5 Samples Using The Canvas Element

The last sample is Netron, a library for editing graph elements and connections using HTML5 canvas. It allows the definition of specific graph elements and custom code can be added to change the appearance of these elements.

Each node has a custom set of connection points that can be connected by dragging the mouse. Double-click will activate an element so it’s content can be edited using an overlay input element. Netron includes and undo stack implementation that records all edits and allows reverting them.

See these in action and learn more about Lutz Roeder’s HTML5 work here…

share save 256 24 Lutz Roeders HTML5 Samples Using The Canvas Element