Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

228
Views
html5 canvas resize a drawn line

I'm working on a HTML5 Canvas whiteboard.

I store all my elements on the stage in an array.

Now I added a drawing function. I can draw and select the drawn object. Now I want to resize the object.

My Paint Class

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();
    }
}

A result could look like this: Drawing

Positions are stored in this format: enter image description here

If want to resize the drawing proportional if I drag a corner of the calculated rectangle.

I hope someone can help me with that problem.

thanks in advance Frank

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

I think I'm close to a solution, but now I get some form deformations.

I calculate the center of the drawing and then I check each point, if it's position is lower or higher of the center and then I increase or decrease the position by the value of the distance between the start and end position of the corner that I'm dragging.

stageObjects[i].coordinates.map(dot=>{
    // upper left corner
    if(dot.startX<stageObjects[i].xCenter && dot.startY<stageObjects[i].yCenter)
    {
        dot.startX -= distance;
        dot.startY -= distance;
    }
    if(dot.mouseX<stageObjects[i].xCenter && dot.mouseY<stageObjects[i].yCenter)
    {
        dot.mouseX -= distance;
        dot.mouseY -= distance;
    }
    // upper right corner
    if(dot.startX>stageObjects[i].xCenter && dot.startY<stageObjects[i].yCenter)
    {
        dot.startX += distance;
        dot.startY -= distance;
    }
    if(dot.mouseX>stageObjects[i].xCenter && dot.mouseY<stageObjects[i].yCenter)
    {
        dot.mouseX += distance;
        dot.mouseY -= distance;
    }
    // lower left corner 
    if(dot.startX<stageObjects[i].xCenter && dot.startY>stageObjects[i].yCenter)
    {
        dot.startX -= distance;
        dot.startY += distance;
    }
    if(dot.mouseX<stageObjects[i].xCenter && dot.mouseY>stageObjects[i].yCenter)
    {
        dot.mouseX -= distance;
        dot.mouseY += distance;
    }
    // lower right corner 
    if(dot.startX>stageObjects[i].xCenter && dot.startY>stageObjects[i].yCenter)
    {
        dot.startX += distance;
        dot.startY += distance;
    }
    if(dot.mouseX>stageObjects[i].xCenter && dot.mouseY>stageObjects[i].yCenter)
    {
        dot.mouseX += distance;
        dot.mouseY += distance;
    }
})
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!