canvas根据坐标绘制矩形

<template>
  <div class="canvas" ref="canvas-container">
    <canvas class="box" ref="canvas" :width="rateWidth" :height="rateHeight">
    </canvas>
  </div>
</template>

<script>
//rate 换算比例(以宽为换算标准)
//originWidth 原始宽
//originHeight 原始高

//rateWidth 比例换算宽
//rateHeight 比例换算高
export default {
  data(){
    return{
      rate: 1,
      originWidth: 2480, //300分辨率
      originHeight: 3508, //300分辨率
      dots:[],
    arrs:[
     [{x:19,y:85},{x:111,y:85},{x:111,y:163},{x:19,y:163},{x:19,y:85}],
      ]

    }
  },
  computed:{
    rateWidth(){
      return this.originWidth * this.rate
    },
    rateHeight(){
      return this.originHeight * this.rate
    }
  },
  mounted(){
    this.getarrs()
    this.calcRate()
  },
  methods:{
        getarrs(){
            let dots = this.arrs
          dots.forEach(item=>{
            item.forEach(it=>{
              it.x = it.x * this.rate
              it.y = it.y * this.rate
            })
          })
          this.dots = dots
          this.$nextTick(()=>{
            this.initCanvas()
          })
        },
    calcRate(){
      let containerDom = this.$refs['canvas-container']
      const containerWith = containerDom.clientWidth || containerDom.offsetWidth
      const rate = Math.floor(containerWith / this.originWidth *100) / 100
      this.rate = rate
    },
    initCanvas(){
      let canvasDom = this.$refs['canvas']
      let ctx = canvasDom.getContext("2d")
      this.dots.forEach(item=>{
        for(let i=0; i < item.length; i++){
          if(i == item.length-1) return 
          ctx.beginPath();
          ctx.moveTo(item[i].x,item[i].y);
          ctx.lineWidth = 2
          ctx.lineTo(item[i+1].x,item[i+1].y)
          ctx.stroke();
          ctx.storkeStyle = '#ff0000'
        }
      })
    }
  }
}
</script>

<style  scoped>
.canvas{
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  border: 1px solid red
}
.box{
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
</style>