started refactoring rendering with paper.js

src/components/MapConcernements.vue

@@ -26,6 +26,7 @@ import Matter from "matter-js";
 import MatterAttractors from "matter-attractors";
 Matter.use(MatterAttractors);
 
+import paper from 'paper';
 
 import { mapState, mapActions } from 'pinia'
 import { ConcernementsStore } from '@/stores/concernements'
@@ -38,7 +39,7 @@ export default {
     return {
       canvasMap: {
         canvas: null,
-        ctx: null,
+        ctx: null
       },
       animateEvent: new Event('animate'),
       granim: null,
@@ -85,6 +86,10 @@ export default {
 
     let canvas_w = this.canvasMap.canvas.width = this.canvasMap.canvas.parentElement.clientWidth;
     let canvas_h = this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight;
+    console.log(`canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`);
+
+    paper.setup(this.canvasMap.canvas);
+    // console.log('this.canvasMap.paper', this.canvasMap.paper);
 
     // MATTER
     let wall_w = 100;
@@ -113,7 +118,7 @@ export default {
     ...mapActions(ConcernementsStore,['resetConcernementOpened']),
     ...mapActions(CommonStore,['setHoverElmt']),
     animate () {
-      this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
+      // this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
       // this.canvasMap.canvas.dispatchEvent(this.animateEvent)
       Matter.Engine.update(this.engine, 1);
       // this.checkMouseHover();