W-Shadow.com

I wanted to familiarize myself with the much-touted canvas element, so I used it to build an interactive celtic knot generator/editor. Give it a try.

Launch the celtic knot generator.

Note: Requires a fairly modern browser.

Instructions

When you first load up the knot generator, you will see a 10×10 grid filled with the default cross-hatch pattern. Click on one of the red or blue control nodes to select it. Then click on another node of the same color to make a cut between those nodes. Click the same nodes again to remove the cut. Note that you can only create horizontal and vertical cuts, not diagonal ones.

Keep making more cuts to create your own celtic knot. Experiment with the cell size, string color and other settings. Once you’ve found a combination you like, you can download the resulting knot by clicking the “Download as PNG” button.

If you want to start over, click the “Reset pattern” button to go back to the default cross-hatch pattern. Alternatively, click “Randomize” to create a random symmetrical knot with the current settings.

Screenshots

A screenshot of the knot editor interface:

A basic example knot:

A more complex knot:

Setting the stroke color to white produces a different visual style:

Browser Compatibility

Tested in:

• Chrome 19
• Opera 11.62
• Firefox 11.0 (no HTML5 sliders)
• Internet Explorer 9 (no HTML5 sliders)

Somewhat surprisingly, Firefox turned out to have better canvas rendering performance than Chrome. On my system, setting the grid size to 40×20 and quickly dragging the hue selector in the color picker produced noticeable lag in Chrome, but was perfectly smooth in Firefox. Of course, that’s hardly a scientific test.

Possible Improvements

• Optimization.  Right now, the script is not optimized at all and can sometimes spike the CPU even on a relatively powerful system. It should be possible to improve the rendering speed considerably by, for example, caching and re-using identical image tiles instead of drawing the entire knot from scratch every time. Another thing you could do is limit how often the knot is regenerated when the user drags the size slider(s). Right now, dragging a slider can generate hundreds of image updates and cause massive lag.
• Add the ability to save/load knot patterns and link to saved knots. Should  be easy enough – just stick the pattern data in the URL #anchor.
• Add export to SVG.
• Refactor the renderer. For example, the tile drawing functions could be made simpler by treating cell size as a constant and scaling-up to the actual size with canvasContext.scale().

Final Thoughts

Overall, the canvas element turned out to be rather pleasant to work with.  The API makes sense and is reasonably intuitive. It also reminds me of Processing, which I have used several times before. The MDN canvas tutorial was very helpful for learning the basics.

Credit goes to Yusuke Kamiyamane  for the color picker icon and Anton Lopyrev for the Java-based knot generator that served as an inspiration for the UI.