"Hello, Kotlin" example working with the new library

js/js.translator/testFiles/webDemoCanvasExamples/cases/Hello, Kotlin.kt

@@ -1,24 +1,42 @@
 /*
-  This example is just simple text floating around. If u are using chrome, there is a bug that spoil the visuals.
+  This shows simple text floating around.
 */
 package hello
 
-import js.*
+import js.dom.html5.*
-import html5.*
+import js.dom.html.window
-import jquery.*
+import js.jquery.*
+
+val canvas: HTMLCanvasElement
+    get() {
+        return window.document.getElementsByTagName("canvas").item(0)!! as HTMLCanvasElement
+    }
+
+val context: CanvasContext
+    get() {
+        return canvas.getContext("2d")!!
+    }
+
+
+val width: Double
+    get() {
+        return canvas.width
+    }
+
+val height: Double
+    get() {
+        return canvas.height
+    }
 
-val context = getContext()
-val height = getCanvas().height
-val width = getCanvas().width
 
 // class representing a floating text
 class HelloKotlin() {
     var relX = 0.2 + 0.2 * Math.random()
     var relY = 0.4 + 0.2 * Math.random()
 
-  val absX : Double
+    val absX: Double
         get() = (relX * width)
-  val absY : Double
+    val absY: Double
         get() = (relY * height)
 
     var relXVelocity = randomVelocity()
@@ -30,7 +48,7 @@ class HelloKotlin() {
     {
         context.font = "bold ${textHeightInPixels}px Georgia, serif"
     }
-  val textWidthInPixels = context.measureText(message).width
+    val textWidthInPixels = context.measureText(message)!!.width
 
     fun draw() {
         context.save()
@@ -38,7 +56,7 @@ class HelloKotlin() {
         // if you using chrome chances are good you wont see the shadow
         context.shadowColor = "#000000"
         context.shadowBlur = 5.0
-    context.shadowOffsetX = -4.0
+        context.shadowOffsetX = - 4.0
         context.shadowOffsetY = 4.0
         context.fillStyle = "rgb(242,160,110)"
         context.fillText(message, absX.toInt(), absY.toInt())
@@ -48,21 +66,21 @@ class HelloKotlin() {
     fun move() {
         val relTextWidth = textWidthInPixels / width
         if (relX > (1.0 - relTextWidth - relXVelocity.abs) || relX < relXVelocity.abs) {
-      relXVelocity *= -1
+            relXVelocity *= - 1
         }
         val relTextHeight = textHeightInPixels / height
         if (relY > (1.0 - relYVelocity.abs) || relY < relYVelocity.abs + relTextHeight) {
-      relYVelocity *= -1
+            relYVelocity *= - 1
         }
         relX += relXVelocity
         relY += relYVelocity
     }
 
-  fun randomVelocity() = 0.03 * Math.random() * (if (Math.random() < 0.5) 1 else -1)
+    fun randomVelocity() = 0.03 * Math.random() * (if (Math.random() < 0.5) 1 else - 1)
 
 
-  val Double.abs : Double
+    val Double.abs: Double
-  get() = if (this > 0) this else -this
+        get() = if (this > 0) this else - this
 }
 
 fun renderBackground() {
@@ -72,13 +90,14 @@ fun renderBackground() {
     context.restore()
 }
 
-fun main(args : Array<String>) {
+fun main(args: Array<String>) {
+    jq {
         val interval = 50
         // we pass a literal that constructs a new HelloKotlin object
         val logos = Array(3) {
             HelloKotlin()
         }
-  jq {
+
         setInterval({
             renderBackground()
             for (logo in logos) {