introduce debounce on output updates + linked box

outputframe-app/injects/dom-helpers.ts

@@ -9,6 +9,11 @@ export function rect(x: number, y: number, width: number, height: number): void
     renderCanvas.drawRect(x, y, width, height);
 }
 
+export function box(x: number, y: number, width: number, height: number): void {
+    var renderCanvas = <RenderCanvas>document.getElementsByTagName("render-canvas")[0];
+    renderCanvas.queueRect(x, y, width, height);
+}
+
 export function getWidth(): number {
     var renderCanvas = <RenderCanvas>document.getElementsByTagName("render-canvas")[0];
     return renderCanvas.units.width;
@@ -16,14 +21,19 @@ export function getWidth(): number {
 
 export function getHeight(): number {
     var renderCanvas = <RenderCanvas>document.getElementsByTagName("render-canvas")[0];
-    return renderCanvas.units.heigt;
+    return renderCanvas.units.height;
 }
 
 export function getCenter(): number {
     var renderCanvas = <RenderCanvas>document.getElementsByTagName("render-canvas")[0];
-    return renderCanvas.units.heigt / 2;
+    return renderCanvas.units.height / 2;
 }
 
 export function getRandom(min: number, max: number): number {
     return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+export function executeDrawQueue() {
+    var renderCanvas = <RenderCanvas>document.getElementsByTagName("render-canvas")[0];
+    renderCanvas.executeDrawQueue();
 }