diff --git a/src/components/document-canvas/document-canvas.vue b/src/components/document-canvas/document-canvas.vue
index 8e025a9..36dc967 100644
--- a/src/components/document-canvas/document-canvas.vue
+++ b/src/components/document-canvas/document-canvas.vue
@@ -57,10 +57,20 @@ export default {
         },
         activeDocument: {
             deep: true,
-            handler( document ) {
+            handler( document, oldValue = null ) {
                 if ( !document?.layers ) {
+                    if ( zCanvas ) {
+                        zCanvas.dispose();
+                        zCanvas = null;
+                    }
                     return;
                 }
+                if ( !zCanvas ) {
+                    this.createCanvas();
+                    this.$nextTick(() => {
+                        zCanvas.insertInPage( this.$refs.canvasContainer );
+                    });
+                }
                 const { name, width, height } = document;
                 if ( name !== lastDocument ) {
                     lastDocument = name;
@@ -99,19 +109,18 @@ export default {
             runSpriteFn( sprite => sprite.setDraggable( isDraggable || sprite instanceof DrawableLayer ));
         }
     },
-    mounted() {
-        zCanvas = new canvas({
-            width: 160,
-            height: 90,
-            animate: true,
-            smoothing: true,
-            backgroundColor: "#FFFFFF",
-            stretchToFit: false,
-            fps: 60
-        });
-        zCanvas.insertInPage( this.$refs.canvasContainer );
-    },
     methods: {
+        createCanvas() {
+            zCanvas = new canvas({
+                width: 160,
+                height: 90,
+                animate: true,
+                smoothing: true,
+                backgroundColor: "#FFFFFF",
+                stretchToFit: false,
+                fps: 60
+            });
+        },
         scaleCanvas() {
             const { width, height } = this.activeDocument;
             const size = this.$el.parentNode?.getBoundingClientRect();
@@ -120,7 +129,7 @@ export default {
                 return;
             }
             console.warn("canvas must be resized");
-            zCanvas.scale( size.width / width );
+            zCanvas?.scale( size.width / width );
         },
     },
 };
diff --git a/src/components/edit-menu/resize-document/resize-document.vue b/src/components/edit-menu/resize-document/resize-document.vue
index d89322f..ee6822c 100644
--- a/src/components/edit-menu/resize-document/resize-document.vue
+++ b/src/components/edit-menu/resize-document/resize-document.vue
@@ -50,6 +50,7 @@ export default {
         width: 0,
         height: 0,
         ratio: 0,
+        syncLock: false,
         maintainRatio: true,
     }),
     computed: {
@@ -57,29 +58,37 @@ export default {
             "activeDocument",
         ]),
     },
-    watch: {
-        width( value ) {
-            if ( !this.maintainRatio || this.ratio === 0 ) {
-                return;
-            }
-            this.height = Math.round( value * this.ratio );
-        },
-        height( value ) {
-            if ( !this.maintainRatio || this.ratio === 0 ) {
-                return;
-            }
-            this.width = Math.round( value / this.ratio );
-        },
-    },
     created() {
         this.width  = this.activeDocument.width;
         this.height = this.activeDocument.height;
         this.ratio  = this.width / this.height;
+
+        this.$watch( "width", function( value ) {
+            if ( !this.maintainRatio || this.syncLock ) {
+                return;
+            }
+            this.lockSync();
+            this.height = Math.round( value / this.ratio );
+        });
+
+        this.$watch( "height", function( value ) {
+            if ( !this.maintainRatio || this.syncLock ) {
+                return;
+            }
+            this.lockSync();
+            this.width = Math.round( value * this.ratio );
+        });
     },
     methods: {
         ...mapMutations([
             "setActiveDocumentSize",
         ]),
+        lockSync() {
+            this.syncLock = true;
+            this.$nextTick(() => {
+                this.syncLock = false;
+            });
+        },
         save() {
             this.setActiveDocumentSize({ width: this.width, height: this.height });
             this.close();
diff --git a/src/components/options-panel/components/file-selector/file-selector.vue b/src/components/options-panel/components/file-selector/file-selector.vue
index 246eccf..344d99c 100644
--- a/src/components/options-panel/components/file-selector/file-selector.vue
+++ b/src/components/options-panel/components/file-selector/file-selector.vue
@@ -90,7 +90,7 @@ export default {
 
             image.src = source;
 
-            const currentDocumentIsEmpty = this.layers.length === 1 && !this.layers[ 0 ].graphics.length;
+            const currentDocumentIsEmpty = this.layers?.length === 1 && !this.layers[ 0 ].graphics.length;
 
             switch ( this.fileTarget) {
                 default:
diff --git a/src/store/modules/document-module.js b/src/store/modules/document-module.js
index 3ae4fe9..edb679b 100644
--- a/src/store/modules/document-module.js
+++ b/src/store/modules/document-module.js
@@ -29,13 +29,13 @@ import { flushSpritesInLayer } from "@/utils/canvas-util";
 
 export default {
     state: {
-        documents : [ DocumentFactory.create() ],
+        documents : [],
         activeIndex: 0,
     },
     getters: {
         documents: state => state.documents,
         activeDocument: state => state.documents[ state.activeIndex ],
-        layers: ( state, getters ) => getters.activeDocument.layers,
+        layers: ( state, getters ) => getters.activeDocument?.layers,
     },
     mutations: {
         setActiveDocument( state, index ) {