✨ new maps

src/components/Map/MapRenderer.vue

@@ -1,6 +1,6 @@
 <template>
   <canvas
-    ref="map" style="max-width: 100%;"
+    ref="map" style="max-width: 25%;"
     :width="props.width"
     :height="props.height"
   ></canvas>
@@ -17,6 +17,7 @@ const props = defineProps<{
   offsetX: number,
   offsetY: number,
   dpi: number,
+  scale: number,
   layers: MapDrawable[]
 }>()
 
@@ -30,7 +31,7 @@ const mapContext = computed(() => {
     virtualWidth: props.width,
     offsetX: props.offsetX,
     offsetY: props.offsetY,
-    scale: props.dpi,
+    scale: props.scale,
     dpi: props.dpi,
   }
 })
@@ -40,6 +41,9 @@ function redraw() {
     ctx: map.value!.getContext('2d')!,
     ...mapContext.value,
   };
+  console.log('redraw', ctx.scale);
+  ctx.ctx.fillStyle = 'black';
+  ctx.ctx.fillRect(0, 0, ctx.virtualWidth, ctx.virtualHeight);
   for (const layer of props.layers) {
     layer.draw(ctx);
   }