[canviz] r359 committed - Use contentloaded to ensure we don't run until the DOM is loaded; use ...

[can...@googlecode.com]

Revision: 359
Author: ryandesign.com
Date: Wed Feb 1 17:10:07 2012
Log: Use contentloaded to ensure we don't run until the DOM is loaded;
use setTimeout to ensure we don't run until excanvas has initialized itself

http://code.google.com/p/canviz/source/detail?r=359

Modified:
/path/trunk/examples
/path/trunk/examples/example1.html
/path/trunk/examples/example1.js
/path/trunk/examples/example2.html
/path/trunk/examples/example2.js
/path/trunk/examples/example3.html
/path/trunk/examples/example3.js

=======================================
--- /path/trunk/examples/example1.html Wed Feb 1 17:05:36 2012
+++ /path/trunk/examples/example1.html Wed Feb 1 17:10:07 2012
@@ -25,6 +25,7 @@

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
<script type="text/javascript" src="../build/path.min.js"></script>
+<script type="text/javascript"
src="contentloaded/contentloaded.js"></script>
<script type="text/javascript" src="example1.js"></script>

</body>
=======================================
--- /path/trunk/examples/example1.js Sun Jan 22 02:27:17 2012
+++ /path/trunk/examples/example1.js Wed Feb 1 17:10:07 2012
@@ -1,4 +1,3 @@
-(function() {
function newTestPaths() {
return [
new Path([
@@ -190,6 +189,9 @@
}
}

+contentLoaded(window, function() {
+ setTimeout(function() {
+
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
ctx = canvas.getContext('2d');
@@ -216,5 +218,5 @@
document.getElementById(checkboxes[i]).onclick = drawFrame;
}
}
-
-}());
+ }, 0);
+});
=======================================
--- /path/trunk/examples/example2.html Wed Feb 1 17:05:36 2012
+++ /path/trunk/examples/example2.html Wed Feb 1 17:10:07 2012
@@ -23,6 +23,7 @@
<canvas id="canvas" width="800" height="400"></canvas>

<script type="text/javascript" src="../build/path.min.js"></script>
+<script type="text/javascript"
src="contentloaded/contentloaded.js"></script>
<script type="text/javascript" src="example2.js"></script>

</body>
=======================================
--- /path/trunk/examples/example2.js Sat Jan 21 19:27:56 2012
+++ /path/trunk/examples/example2.js Wed Feb 1 17:10:07 2012
@@ -1,6 +1,7 @@
-(function() {
var ctx, shapes;

+contentLoaded(window, function() {
+ setTimeout(function() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
ctx = canvas.getContext('2d');
@@ -32,6 +33,8 @@

drawFrame();
}
+ }, 0);
+});

function drawFrame() {
ctx.clearRect(0, 0, 800, 400);
@@ -43,4 +46,3 @@
}
ctx.restore();
}
-}());
=======================================
--- /path/trunk/examples/example3.html Wed Feb 1 17:05:36 2012
+++ /path/trunk/examples/example3.html Wed Feb 1 17:10:07 2012
@@ -41,6 +41,7 @@
<div id="out"></div>

<script type="text/javascript" src="../build/path.min.js"></script>
+<script type="text/javascript"
src="contentloaded/contentloaded.js"></script>
<script type="text/javascript" src="example3.js"></script>

</body>
=======================================
--- /path/trunk/examples/example3.js Sun Jan 22 02:12:03 2012
+++ /path/trunk/examples/example3.js Wed Feb 1 17:10:07 2012
@@ -1,12 +1,14 @@
-(function() {
-
+var ctx, shapes, translateCheckbox, scaleCheckbox, rotateCheckbox;
+
+contentLoaded(window, function() {
+ setTimeout(function() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
- var ctx = canvas.getContext('2d');
+ ctx = canvas.getContext('2d');
ctx.lineWidth = 4;
ctx.lineCap = 'round';

- var shapes = [
+ shapes = [
new Rect(-125, -125, 125, 125, {
x_fill: true,
fillStyle: 'rgba(0, 0, 0, 0.05)',
@@ -19,15 +21,17 @@
})
];

- var translateCheckbox = document.getElementById('translate_checkbox');
- var scaleCheckbox = document.getElementById('scale_checkbox');
- var rotateCheckbox = document.getElementById('rotate_checkbox');
+ translateCheckbox = document.getElementById('translate_checkbox');
+ scaleCheckbox = document.getElementById('scale_checkbox');
+ rotateCheckbox = document.getElementById('rotate_checkbox');

var fps = 30;
var delay = 1000 / fps;
drawFrame();
setInterval(drawFrame, delay);
}
+ }, 0);
+});

function drawFrame() {
var now = new Date();
@@ -52,4 +56,3 @@
shapes[1].draw(ctx);
ctx.restore();
}
-}());