Estoy trabajando en una pizarra HTML5 Canvas.

Guardo todos mis elementos en el escenario en una matriz.

Ahora agregué una función de dibujo. Puedo dibujar y seleccionar el objeto dibujado. Ahora quiero cambiar el tamaño del objeto.

mi clase de pintura

 class Paint { constructor( id="", coordinates =[], color = '', type="paint", x=0, y=0, width=0, height=0 ) { this.id = id; this.coordinates = coordinates, this.fillColor = color; this.type = type; this.x = x; this.y = y; this.width = width; this.height = height; } update() { let { coordinates, color,x,y,width,height} = this; ctx.save(); let xx; let yy; coordinates.map((dot,index) =>{ if(index == 0) { x = dot.startX; y = dot.startY; xx = dot.mouseX; yy = dot.mouseY; } if(dot.startX < x) { x=dot.startX; } if(dot.startY < y) { y=dot.startY; } if(dot.mouseX>xx) { xx=dot.mouseX; } if(dot.mouseY>yy) { yy=dot.mouseY; } let startX = (dot.startX - dx); let startY = (dot.startY - dy); let mouseX = (dot.mouseX - dx); let mouseY = (dot.mouseY - dy); ctx.beginPath(); ctx.lineWidth = 5; ctx.lineCap = 'round'; ctx.strokeStyle = '#ACD3ED'; ctx.moveTo(startX, startY); ctx.lineTo(mouseX, mouseY); ctx.stroke(); }); this.x = x; this.y = y; this.width = xx-x; this.height = yy-y; ctx.restore(); } }

Un resultado podría verse así:

Las posiciones se almacenan en este formato:

Si quiero cambiar el tamaño del dibujo proporcional si arrastro una esquina del rectángulo calculado.

Espero que alguien me pueda ayudar con ese problema.

gracias de antemano franco