Update docs/canvas.md

Poincare · Feb 21, 2012 · d1bb89a · d1bb89a
1 parent ed2ce51
commit d1bb89a
Showing 1 changed file with 46 additions and 39 deletions.
diff --git a/docs/canvas.md b/docs/canvas.md
@@ -4,16 +4,18 @@ Hydroxide is really easy to get started with.
 
 Set up a simple HTML document with a canvas tag:
 
-  <!doctype html>
+```html
-  <html>
+<!doctype html>
-    <head>
+<html>
-      <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+  <head>
-      <script src="hydroxide.js"></script>
+    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
-    </head>
+    <script src="hydroxide.js"></script>
-    <body>
+  </head>
-      <canvas width="600" height="600" id="cnv"></canvas>
+  <body>
-    </body>
+    <canvas width="600" height="600" id="cnv"></canvas>
-  </html>
+  </body>
+</html>
+```
 
 Notice that I specified a HTML5 doctype; you'll need for things to render correctly in some browsers.
 
@@ -23,30 +25,33 @@ Now, you'll need to add a script tag, or link in a script file, I'm just going t
 
 This is what you'd begin with in this file (using jQuery): 
 
-  function init() {
+```javascript
+function init() {
 
-  }
+}
-
-  $(document).ready(init)
 
+$(document).ready(init)
+```
 
 This is pretty standard code.
 
 Now, for Hydroxide to start, you need a couple of things handled first.
 
-  function init() {
+```javascript
-    var c = $("#cnv")[0];
+function init() {
-    var context = c.getContext("2d");
+  var c = $("#cnv")[0];
-
+  var context = c.getContext("2d");
-    var frameTime = 20;
+
-    var engineTime = 20;
+  var frameTime = 20;
+  var engineTime = 20;
+
+  var width = 600; var height = 600;
 
-    var width = 600; var height = 600;
+  var id = "cnv"
-
+}
-    var id = "cnv"
-  }
 
-  $(document).ready(init);
+$(document).ready(init);
+```
 
 As you can see, the code is getting the canvas element from the DOM, then, retreiving the context.
 
@@ -60,20 +65,22 @@ id is the ID in the DOM of the canvas tag.
 
 All we have to do now is to pass on these arguments in the right order to Hydroxide:
 
-  function init() {
+```javascript
-    var c = $("#cnv")[0];
+function init() {
-    var context = c.getContext("2d");
+  var c = $("#cnv")[0];
-
+  var context = c.getContext("2d");
-    var frameTime = 20;
-    var engineTime = 20;
 
-    var width = 600; var height = 600;
+  var frameTime = 20;
-
+  var engineTime = 20;
-    var id = "cnv";
+
-
+  var width = 600; var height = 600;
-    Hydroxide.start(id, context, frameTime, engineTime, width, height);
+
-  }
+  var id = "cnv";
-
+
-  $(document).ready(init);
+  Hydroxide.start(id, context, frameTime, engineTime, width, height);
+}
+
+$(document).ready(init);
+```