diff --git a/src/connect/ConnectSection.svelte b/src/connect/ConnectSection.svelte
index 5cf59dd..c38b421 100644
--- a/src/connect/ConnectSection.svelte
+++ b/src/connect/ConnectSection.svelte
@@ -32,8 +32,10 @@
   })
 
   hid.addEventListener('disconnect', e => {
+    if (device === e.device) {
     toast.info('Device disconnected')
-    if (device === e.device) onchange(null)
+      onchange(null)
+    }
   })
 
   onMount(() => {
diff --git a/src/edit/EditSection.svelte b/src/edit/EditSection.svelte
index 069c2d2..a6b9766 100644
--- a/src/edit/EditSection.svelte
+++ b/src/edit/EditSection.svelte
@@ -52,7 +52,7 @@
 
   async function renderPattern() {
     if (imageBitmap === null) {
-      onchange(null)
+      renderedBitmap = null
       return
     }
 
@@ -71,12 +71,15 @@
 
     const quantizedData = quantizer.reduce(ctx)
     renderedBitmap = quantizedData
-    onchange(quantizedData)
   }
 
   $effect(() => {
     renderPattern()
   })
+
+  $effect(() => {
+    onchange(renderedBitmap)
+  })
 </script>
 
 <div class={cn('flex max-lg:flex-col gap-4', classNames)} {...restProps}>
diff --git a/src/edit/preview/PreviewCanvases.svelte b/src/edit/preview/PreviewCanvases.svelte
index 9cd79d2..917b052 100644
--- a/src/edit/preview/PreviewCanvases.svelte
+++ b/src/edit/preview/PreviewCanvases.svelte
@@ -36,9 +36,13 @@
   }
 
   $effect(() => {
+    const context2x = freshContext(canvas2xEl)
+    const context1x = freshContext(canvas1xEl)
+
     if (bitmap === null) return
-    drawQuantizedData(freshContext(canvas2xEl), bitmap)
-    drawQuantizedData(freshContext(canvas1xEl), bitmap)
+
+    drawQuantizedData(context2x, bitmap)
+    drawQuantizedData(context1x, bitmap)
   })
 </script>