Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Update docs/canvas.md

  • Loading branch information...
commit d1bb89aa6d9104d5ae9877d8d3ffd3adac3cb599 1 parent ed2ce51
@Poincare authored
Showing with 46 additions and 39 deletions.
  1. +46 −39 docs/canvas.md
View
85 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>
- <head>
- <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
- <script src="hydroxide.js"></script>
- </head>
- <body>
- <canvas width="600" height="600" id="cnv"></canvas>
- </body>
- </html>
+```html
+<!doctype html>
+<html>
+ <head>
+ <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script src="hydroxide.js"></script>
+ </head>
+ <body>
+ <canvas width="600" height="600" id="cnv"></canvas>
+ </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() {
- var c = $("#cnv")[0];
- var context = c.getContext("2d");
-
- var frameTime = 20;
- var engineTime = 20;
+```javascript
+function init() {
+ var c = $("#cnv")[0];
+ var context = c.getContext("2d");
+
+ 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() {
- var c = $("#cnv")[0];
- var context = c.getContext("2d");
-
- var frameTime = 20;
- var engineTime = 20;
+```javascript
+function init() {
+ var c = $("#cnv")[0];
+ var context = c.getContext("2d");
- var width = 600; var height = 600;
-
- var id = "cnv";
-
- Hydroxide.start(id, context, frameTime, engineTime, width, height);
- }
-
- $(document).ready(init);
+ var frameTime = 20;
+ var engineTime = 20;
+
+ var width = 600; var height = 600;
+
+ var id = "cnv";
+
+ Hydroxide.start(id, context, frameTime, engineTime, width, height);
+}
+
+$(document).ready(init);
+```
Please sign in to comment.
Something went wrong with that request. Please try again.