Procedural Textures in HTML5 Canvas

An excellent article by Kas Thomas on generating Procedural Textures in HTML5 Canvas using Perlin Noise.

Some examples: (the code is embedded in the blog post and must be cut-n-pasted into an HTML document to run)

Generated canvas textures can easily be used as sources for additional images or WebGL textures – so this has a number of applications.

If you’re new to Perlin noise, check out his Ken’s earlier article explaining generating Perlin Noise in JavaScript in detail.


You might also find this interesting:


  1. HTML5 Game Development Facebook, Twitter and G+ The official HTML5GameDevelopment.org Facebook page up at: http://www.facebook.com/Html5GameDevelopment The official HTML5GameDevelopment.org Twitter account is at: https://twitter.com/#!/gamedevhtml5 The Google Plus page is up at: https://plus.google.com/b/106608051085232600929/ All are updated automatically via the...

  2. Gorgeous HTML5 WebGL Procedural Terrain Generation A Gorgeous demo using Three.js and WebGL showing birds from RO.ME flying over a landscape. Share List...

  3. HTML5 Canvas Cheat Sheet DZone has a nice Downloadable, PDF Cheat Sheet for HTML5 Canvas that covers the Canvas Element in depth, going over the basics of when using the element is appropriate and...

  4. HTML5 Simple Canvas Tutorial Diving into the world of game development can be a daunting task, but luckily there are tutorial makers who are glad to help. An often problem with these tutorials is...

  5. Developing a simple HTML5 Canvas Space Shooter The mozilla hacks blog has an interesting article on building a simple 2D space shooter with both single-player and multi-player support. While not a full tutorial, it provides a good...

HTML5 Game Dev Tutorials