fix undefined canvas?

logic.js

@@ -18,6 +18,7 @@ var image = new Image();
 image.src = 'icon.png';
 
 var canvas;
+var canvas_image = document.createElement("canvas");
 var ctx;
 
 window.onload = () =>
@@ -27,8 +28,6 @@ window.onload = () =>
   canvas = document.getElementById("canvas");
   ctx = canvas.getContext('2d');
 
-  canvas.image = document.createElement("canvas");
-
   target.addEventListener('mousedown', on_mousedown);
   target.addEventListener('touchstart', (e) => handle_touch(e, on_mousedown))
 
@@ -42,9 +41,6 @@ window.onload = () =>
   target.addEventListener('wheel', on_mousescroll);
 
   target.addEventListener('dblclick', on_doubleclick);
-
-  update_transform();
-  draw();
 }
 
 
@@ -94,9 +90,9 @@ function load_map()
   update_transform();
 
   image.onload = function() {
-    canvas.image.width = image.naturalWidth;
-    canvas.image.height = image.naturalHeight;
-    canvas.image.getContext("2d").drawImage(image, 0, 0)
+    canvas_image.width = image.naturalWidth;
+    canvas_image.height = image.naturalHeight;
+    canvas_image.getContext("2d").drawImage(image, 0, 0)
 
     draw();
     get_param_position();
@@ -137,7 +133,7 @@ function draw()
   canvas.height = image.naturalHeight;
 
   ctx.imageSmoothingEnabled = false;
-  ctx.drawImage(canvas.image, 0, 0);
+  ctx.drawImage(canvas_image, 0, 0);
 
   if ( !show_labels )
     return;

theme.css

@@ -81,12 +81,6 @@ div#map_zoomable > img, canvas{
   height: auto;
 }
 
-#map_image {
-  image-rendering: pixelated;
-  pointer-events: none;
-  user-select: none;
-}
-
 #canvas {
   image-rendering: pixelated;
   width: 100%;