CODEWITHSUNDEEP
javascripthtmlcanvas
AkshayJ
AkshayJ

Reputation: 769

Determine shape drawn on canvas from stored coordinates in an array

I have startX,startY,endX,endY mousecoordinates using which I draw 3 shapes(a line,ellipse and a rectangle) on canvas.Now I store these coordinates(startX,startY,endX,endY) in a array(for each shape drawn) and draw it again on cleared canvas.Now,the problem is how do I determine from these coordinates stored in the array wheather the shape previously drawn was a circle,a line or a rectangle?

function drawLine(toX, toY, context,type) {


            if (type == "line") {
                context.strokeStyle = "#FF0000";
                context.beginPath();
                context.moveTo((startX), (startY));
                context.lineTo((toX), (toY));
                context.stroke();
            }
            else if (type == "circle") {
                context.strokeStyle = "#FF0000";
                context.beginPath();
                context.moveTo(startX, startY + (toY - startY) / 2);
                context.bezierCurveTo(startX, startY, toX, startY, toX, startY + (toY - startY) / 2);   
                context.bezierCurveTo(toX, toY, startX, toY, startX, startY + (toY - startY) / 2);
                context.closePath();
                context.stroke();
            }
            else if (type == "rect") {
                context.beginPath();
                context.rect(startX, startY, mouseX - startX, mouseY - startY);
                context.strokeStyle = '#FF0000';
                context.stroke();
            }   
    }

Now i store these drawn shapes coordinates in a array and draw the same shapes on a cleared canvas by looping through the array of these shapes(with mouse coordinates for each). Onmouseup event is push my coordinates in an array as follows-

     var newLine = new myLine(startX, startY, endX, endY);
            myLines.push(newLine);

   function myLine(xStart, yStart, xEnd, yEnd) {
        this.xS = xStart;
        this.yS = yStart;
        this.xE = xEnd;
        this.yE = yEnd;
    }

Upvotes: 2

Views: 962

Answers (1)

AkshayJ
AkshayJ

Reputation: 769

Heres how i solved my problem finally :)

 var newLine = new myLine(startX, startY, endX, endY,type);
            myLines.push(newLine);

   function myLine(xStart, yStart, xEnd, yEnd,type) {
        this.xS = xStart;
        this.yS = yStart;
        this.xE = xEnd;
        this.yE = yEnd;
        this.type=type
    }

And then looped through the array

      for (i = 0; i < myLines.length; i++) {

             newxS =  myLines[i].xS ;
                newxE= myLines[i].xE ;

              newyS=  myLines[i].yS ;
                       newyE=  myLines[i].yE  ;

                           ctxtem.strokeStyle = "#FF0000";

                           if (myLines[i].type == "line") {
                               ctxtem.beginPath();
                               ctxtem.moveTo(newxS, newyS);
                               ctxtem.lineTo(newxE, newyE);
                               ctxtem.stroke();


                           }
                           else if (myLines[i].type == "circle") {
                               ctxtem.beginPath();
                               ctxtem.moveTo(newxS, newyS + (newyE - newyS) / 2);
                               ctxtem.bezierCurveTo(newxS, newyS, newxE, newyS, newxE, newyS + (newyE - newyS) / 2);
                               ctxtem.bezierCurveTo(newxE, newyE, newxS, newyE, newxS, newyS + (newyE - newyS) / 2);
                               ctxtem.closePath();
                               ctxtem.stroke();

                           }
                           else if (myLines[i].type == "rect") {
                               ctxtem.beginPath();
                               ctxtem.rect(newxS, newyS, newxE - newxS, newyE - newyS);
                               ctxtem.stroke();
                           }

                ctxtem.save();
}

Upvotes: 1

Related Questions