how to make stage responsive?

https://konvajs.github.io/docs/sandbox/Responsive_Canvas.html

this is my code

computed: {
    stage() {
      return this.$refs.stage.getStage();
    },
  },

      const scale = 2;
      this.stage.width = this.stage.width * scale;
      this.stage.height = this.stage.height * scale;
      this.stage.scale({ x: scale, y: scale });
      this.configCircle.x = this.configCircle.x - 50;
      this.stage.draw();

the stage size is not changing,the canvas size seems can’t be changed by this way,but i can see the circle scale 2x bigger.

i see your componet, it has two div outside the canvas,it seems must set spectified width and hieght.

[lavrton]

Konva is doing automatic adjustments for HDPI screens (like retina). It is required for sharp and good display. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

If you don’t need it, you can manually change that behavior:

Konva.pixelRatio = 1;

[lavrton]

Sure. My you just need to set CSS values to fit the required size. Updated the demo: https://codesandbox.io/s/502p384jyp

<template>
  <div v-bind:style="{ height: '100vh', width: '100vw' }" ref="container">
    <v-stage ref="stage" :config="stageSize">
      <v-layer>
        <v-circle
          :config="{
            x: 50,
            y: 50,
            radius: 50,
            fill: 'green'
          }"
        />
        <v-circle
          :config="{
            x: stageSize.width - 50,
            y: 50,
            radius: 50,
            fill: 'green'
          }"
        />
        <v-circle
          :config="{
            x: stageSize.width - 50,
            y: stageSize.height - 50,
            radius: 50,
            fill: 'green'
          }"
        />
        <v-circle
          :config="{
            x: 50,
            y: stageSize.height - 50,
            radius: 50,
            fill: 'green'
          }"
        />
      </v-layer>
      <v-layer ref="dragLayer"></v-layer>
    </v-stage>
  </div>
</template>

<script>
const width = window.innerWidth;
const height = window.innerHeight;
let vm = {};
export default {
  data() {
    return {
      stageSize: {
        width: width,
        height: height
      }
    };
  },
  created: function() {
    window.addEventListener("resize", this.changeRect);
    this.changeRect();
  },
  methods: {
    changeRect: function() {
      const container = this.$refs.container;

      if (!container) {
        return;
      }

      const height = container.offsetHeight;
      const width = container.offsetWidth;

      console.log(height, height);
      this.stageSize.width = width;
      this.stageSize.height = height;
    }
  }
};
</script>