Adding an early version of js dom library. Fancy lines example passing (others failing)

js/js.translator/testFiles/webDemoCanvasExamples/cases/Fancy lines.kt

@@ -6,59 +6,61 @@ Note that only a subset of the api is supported for now.
 
 package fancylines
 
-import js.*;
-import html5.*;
-import jquery.*;
+import js.dom.html5.*
+import js.dom.html.window
 
-fun main(args : Array<String>) {
-  //jq is a name for JQuery function
-  jq {
-    FancyLines().run();
-  }
+fun main(args: Array<String>) {
+    window.onload = {
+        FancyLines().run()
+    }
 }
 
+val canvas: HTMLCanvasElement
+    get() {
+        return window.document.getElementsByTagName("canvas").item(0) as HTMLCanvasElement
+    }
+
 class FancyLines() {
-  // we use two 'magic' functions here getContext() and getCanvas()
-  val context = getContext();
-  val height = getCanvas().height;
-  val width = getCanvas().width;
-  var x = width * Math.random();
-  var y = height * Math.random();
-  var hue = 0;
+    val context = canvas.getContext("2d")!!
+    val height = canvas.height
+    val width = canvas.width
+    var x = width * Math.random()
+    var y = height * Math.random()
+    var hue = 0;
 
-  fun line() {
-    context.save();
+    fun line() {
+        context.save()
 
-    context.beginPath();
+        context.beginPath()
 
-    context.lineWidth = 20.0 * Math.random();
-    context.moveTo(x.toInt(), y.toInt());
+        context.lineWidth = 20.0 * Math.random()
+        context.moveTo(x.toInt(), y.toInt());
 
-    x = width * Math.random();
-    y = height * Math.random();
+        x = width * Math.random();
+        y = height * Math.random()
 
-    context.bezierCurveTo(width * Math.random(), height * Math.random(),
-      width * Math.random(), height * Math.random(), x, y);
+        context.bezierCurveTo(width * Math.random(), height * Math.random(),
+                width * Math.random(), height * Math.random(), x, y);
 
-    hue += Math.random() * 10;
+        hue += Math.random() * 10;
 
-    context.strokeStyle = "hsl($hue, 50%, 50%)";
+        context.strokeStyle = "hsl($hue, 50%, 50%)";
 
-    context.shadowColor = "white";
-    context.shadowBlur = 10.0;
+        context.shadowColor = "white";
+        context.shadowBlur = 10.0;
 
-    context.stroke();
+        context.stroke();
 
-    context.restore();
-  }
+        context.restore();
+    }
 
-  fun blank() {
-    context.fillStyle = "rgba(255,255,1,0.1)";
-    context.fillRect(0, 0, width, height);
-  }
+    fun blank() {
+        context.fillStyle = "rgba(255,255,1,0.1)";
+        context.fillRect(0, 0, width, height);
+    }
 
-  fun run() {
-    setInterval({line()}, 40);
-    setInterval({blank()}, 100);
-  }
+    fun run() {
+        setInterval({line()}, 40);
+        setInterval({blank()}, 100);
+    }
 }