diff --git a/src/custom/ColorTable.hx b/src/custom/ColorTable.hx
index 9d01e64..9230229 100644
--- a/src/custom/ColorTable.hx
+++ b/src/custom/ColorTable.hx
@@ -1,4 +1,5 @@
 package custom;
+import haxe.ui.events.UIEvent;
 import haxe.io.Bytes;
 import haxe.ui.Toolkit;
 import haxe.ui.components.Canvas;
@@ -12,14 +13,24 @@ class ColorTable extends Canvas {
         super();
         componentGraphics.setProperty("html5.graphics.method", "canvas");
     }
-    
-    private override function onReady() {
-        super.onReady();
-        pixels = Bytes.alloc(Std.int(this.width * this.height * 4));
+
+    private var _showNextFrame = false;
+
+    @:bind(this, UIEvent.SHOWN)
+    private function onShown(_) {
+        if (_showNextFrame) return;
+        _showNextFrame = true;
+        if (pixels == null) pixels = Bytes.alloc(Std.int(this.width * this.height * 4));
         frame();
     }
+
+    @:bind(this, UIEvent.HIDDEN)
+    private function onHidden(_) {
+        _showNextFrame = false;
+    }
     
     private function frame() {
+        if (!_showNextFrame) return;
         drawColorTable(componentGraphics, Std.int(this.width), Std.int(this.height), 1);
     }
     
diff --git a/src/custom/DemoGraph.hx b/src/custom/DemoGraph.hx
index b22baa3..f36b5d0 100644
--- a/src/custom/DemoGraph.hx
+++ b/src/custom/DemoGraph.hx
@@ -1,15 +1,25 @@
 package custom;
 
+import haxe.ui.events.UIEvent;
 import haxe.ui.Toolkit;
 import haxe.ui.components.Canvas;
 import haxe.ui.geom.Point;
 import haxe.ui.graphics.ComponentGraphics;
 
 class DemoGraph extends Canvas {
-    public function new() {
-        super();
+    private var _showNextFrame = false;
+
+    @:bind(this, UIEvent.SHOWN)
+    private function onShown(_) {
+        if (_showNextFrame) return;
+        _showNextFrame = true;
         frame();
     }
+
+    @:bind(this, UIEvent.HIDDEN)
+    private function onHidden(_) {
+        _showNextFrame = false;
+    }
     
     private static var offset1:Float = 0;
     private static var offset1Direction = 1;
@@ -24,6 +34,7 @@ class DemoGraph extends Canvas {
     private var _pointCDirection = 1;
     private var _pointCOffset:Float = 0;
     private function frame() {
+        if (!_showNextFrame) return;
         componentGraphics.clear();
         
         drawGrid(componentGraphics, 520, 420, 10);
diff --git a/src/custom/MiniGraph.hx b/src/custom/MiniGraph.hx
index eb66064..11dc9d6 100644
--- a/src/custom/MiniGraph.hx
+++ b/src/custom/MiniGraph.hx
@@ -1,5 +1,6 @@
 package custom;
 
+import haxe.ui.events.UIEvent;
 import haxe.io.Bytes;
 import haxe.ui.Toolkit;
 import haxe.ui.components.Canvas;
@@ -12,13 +13,24 @@ class MiniGraph extends Canvas {
         super();
         componentGraphics.setProperty("html5.graphics.method", "canvas");
     }
-    
-    private override function onReady() {
-        super.onReady();
-        pixels = Bytes.alloc(Std.int(this.width * this.height * 4));
-        populateDataPoints();
+
+    private var _showNextFrame = false;
+
+    @:bind(this, UIEvent.SHOWN)
+    private function onShown(_) {
+        if (_showNextFrame) return;
+        _showNextFrame = true;
+        if (pixels == null) {
+            pixels = Bytes.alloc(Std.int(this.width * this.height * 4));
+            populateDataPoints();
+        }
         frame();
     }
+
+    @:bind(this, UIEvent.HIDDEN)
+    private function onHidden(_) {
+        _showNextFrame = false;
+    }
     
     private function populateDataPoints() {
         var cx = Std.int(this.width);
@@ -56,6 +68,7 @@ class MiniGraph extends Canvas {
     
     var skipFrame:Bool = false; // lets just slow it down in a hacky way bu skipping every other "frame"
     private function frame() {
+        if (!_showNextFrame) return;
         if (skipFrame == true) {
             skipFrame = false;
             Toolkit.callLater(frame);
diff --git a/src/custom/Noise.hx b/src/custom/Noise.hx
index 08dd563..8d3c4e0 100644
--- a/src/custom/Noise.hx
+++ b/src/custom/Noise.hx
@@ -1,5 +1,6 @@
 package custom;
 
+import haxe.ui.events.UIEvent;
 import haxe.io.Bytes;
 import haxe.ui.Toolkit;
 import haxe.ui.components.Canvas;
@@ -15,16 +16,28 @@ class Noise extends Canvas {
         super();
         componentGraphics.setProperty("html5.graphics.method", "canvas");
     }
-    
-    private override function onReady() {
-        super.onReady();
-        pixels = Bytes.alloc(Std.int(this.width * this.height * 4));
+
+    private var _showNextFrame = false;
+
+    @:bind(this, UIEvent.SHOWN)
+    private function onShown(_) {
+        if (_showNextFrame) return;
+        _showNextFrame = true;
+        if (pixels == null) {
+            pixels = Bytes.alloc(Std.int(this.width * this.height * 4));
+        }
         frame();
     }
+
+    @:bind(this, UIEvent.HIDDEN)
+    private function onHidden(_) {
+        _showNextFrame = false;
+    }
     
     var skipFrame:Bool = false; // lets just slow it down in a hacky way bu skipping every other "frame"
     private function frame() {
-        if (skipFrame == true) {
+        if (!_showNextFrame) return;
+        if (skipFrame) {
             skipFrame = false;
             Toolkit.callLater(frame);
             return;