Terrain Generation with Canvas and JavaScript

Somethinghitme.com has an oldie-but-goodie post from 2009 titled “Terrain Generation with Canvas and JavaScript” that talks a little bit about the algorithms used and links to a working 2d terrain generator (with a shadowmap generator as well). Worth a look if you’re working on generating procedural terrain.

(I came across the post via the game Make No Wonder, a cool exploration and resource management game by Matthew Hollett you should also check out)


You might also find this interesting:


  1. 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...

  2. 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...

  3. 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...

  4. Ejecta: A Fast, Open Source JavaScript, Canvas & Audio Implementation for iOS Ejecta is a open-source native wrapper for iOS that has custom hardware-accelerated Canvas and native audio implementations for porting your HTML5 games into the apple App store. Released by Dominic...

  5. 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...

HTML5 Game Dev Tutorials