diff --git a/dotscape b/dotscape
index 1579e6c..1ed7fc2 100755
Binary files a/dotscape and b/dotscape differ
diff --git a/fcore/app-with.sml b/fcore/app-with.sml
index 3956892..e4435e3 100644
--- a/fcore/app-with.sml
+++ b/fcore/app-with.sml
@@ -564,10 +564,12 @@ struct
         , g
         , b
         , a
-        , modalNum = _
+        , modalNum = prevNum
         , undo
         , redo
         } = app
+
+      val newNum = (prevNum * 10) + newNum
     in
       { mode = mode
       , mouseX = mouseX
@@ -625,7 +627,7 @@ struct
         , redo
         } = app
 
-      val r = modalNum
+      val r = Int.min (modalNum, 255)
     in
       { mode = mode
       , mouseX = mouseX
@@ -683,7 +685,7 @@ struct
         , redo
         } = app
 
-      val g = modalNum
+      val g = Int.min (modalNum, 255)
     in
       { mode = mode
       , mouseX = mouseX
@@ -741,7 +743,7 @@ struct
         , redo
         } = app
 
-      val b = modalNum
+      val b = Int.min (modalNum, 255)
     in
       { mode = mode
       , mouseX = mouseX
@@ -799,7 +801,7 @@ struct
         , redo
         } = app
 
-      val a = modalNum
+      val a = Int.min (modalNum, 255)
     in
       { mode = mode
       , mouseX = mouseX
@@ -828,6 +830,64 @@ struct
       }
     end
 
+  fun canvasWidth (app: app_type, newCanvasWidth) =
+    let
+      val
+        { mode
+        , canvasWidth = _
+        , squares
+        , arrowX
+        , arrowY
+        , canvasHeight
+        , windowWidth
+        , windowHeight
+        , xClickPoints
+        , yClickPoints
+
+        , showGraph
+        , mouseX
+        , mouseY
+        , openFilePath
+        , fileBrowser
+        , fileBrowserIdx
+        , r
+        , g
+        , b
+        , a
+        , modalNum
+        , undo
+        , redo
+        } = app
+
+      val squares = changeSquaresSize (squares, newCanvasWidth, canvasHeight)
+    in
+      { mode = mode
+      , canvasWidth = newCanvasWidth
+      , mouseX = mouseX
+      , mouseY = mouseY
+      , squares = squares
+      , arrowX = arrowX
+      , arrowY = arrowY
+      , canvasHeight = canvasHeight
+      , windowWidth = windowWidth
+      , windowHeight = windowHeight
+      , xClickPoints = xClickPoints
+      , yClickPoints = yClickPoints
+
+      , showGraph = showGraph
+      , openFilePath = openFilePath
+      , fileBrowser = fileBrowser
+      , fileBrowserIdx = fileBrowserIdx
+      , r = r
+      , g = g
+      , b = b
+      , a = a
+      , modalNum = 0
+      , undo = undo
+      , redo = redo
+      }
+    end
+
 (* todo: 
   fun useSquaresAndSetNormalMode (app: app_type, squares, canvasWidth, canvasHeight) =
 *)
diff --git a/fcore/normal-mode.sml b/fcore/normal-mode.sml
index 2175bdc..0f5cbca 100644
--- a/fcore/normal-mode.sml
+++ b/fcore/normal-mode.sml
@@ -247,14 +247,8 @@ struct
         (model, drawMsg)
       end
 
-  fun updateNum (model: app_type, inputNum) =
-    let
-      val oldNum = #modalNum model
-      val newNum = oldNum * 10 + inputNum
-      val newNum = if newNum > 255 then 0 else newNum
-    in
+  fun updateNum (model: app_type, newNum) =
       (AppWith.modalNum (model, newNum), [])
-    end
 
   fun updateRed model = (AppWith.r model, [])
   fun updateGreen model = (AppWith.g model, [])