Resize canvas with components from 100% to 120%

One possible solution to resize the canvas with components from 100% to 120% is by using CSS transforms. Here's an example using Vue.js:

1. First, create a Vue component for the canvas:

<template>
  <div class="canvas" :style="{ transform: `scale(${scale})` }">
    <!-- Your canvas content here -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      scale: 1, // Initial scale is 100%
    };
  },
  methods: {
    increaseScale() {
      this.scale += 0.2; // Increase scale by 20%
    },
  },
};
</script>

<style>
.canvas {
  width: 400px;
  height: 400px;
  transform-origin: top left; /* Set the origin point for scaling */
}
</style>

1. In your parent component, import and use the canvas component:

<template>
  <div>
    <canvas></canvas>
    <button @click="increaseScale">Increase Scale</button>
  </div>
</template>

<script>
import Canvas from './Canvas.vue';

export default {
  components: {
    Canvas,
  },
};
</script>

Now, when the user clicks the "Increase Scale" button, the canvas will be scaled up by 20% each time. The transform-origin property ensures that the scaling is applied from the top left corner of the canvas.

Note: This solution assumes you are using Vue.js and have a basic understanding of Vue components. Adjust the code accordingly if you are using a different framework or plain JavaScript.