undo the selected shape on the canvas

Question

I would like to a particular shape on the canvas. I have implemented a canvas on which we can draw shapes like rectangle, circle, line, ellipse and so on using mouse events. I have created a drop down list with all the shapes that I am drawing on the canvas. The drop down list consists of shapes like circle, rectangle, parallelogram, ellipse, circle... Now what I want is, for example, think that I have drawn 2 rectangles and 2 circles. When I select circle shape from the drop down list and click undo button it should undo only the circles and if I select the rectangle shape from the drop down list and click on undo button it should undo only the rectangle shapes not the other shapes the code that i am using for undo in the canvas is :

function cPush() 
{
    canvas = document.getElementById("drawingCanvas");
    context = canvas.getContext("2d");
    cStep++;
    if (cStep < cPushArray.length) 
    { 
        cPushArray.length = cStep; 
    }
    cPushArray.push(document.getElementById('drawingCanvas').toDataURL());
}
function cUndo()
{
    canvas = document.getElementById("drawingCanvas");
    context = canvas.getContext("2d");
    context.clearRect(0,0,canvas.width, canvas.height);
    if (cStep > 0) 
    {
        cStep--;
        var canvasPic = new Image();
        canvasPic.src = cPushArray[cStep]; 
        context.drawImage(canvasPic, 0, 0); 
    }
}

Answer 1

How to "undo" (remove a specified shape and redraw the remaining shapes)

Demo: http://jsfiddle.net/m1erickson/9pTJ2/

Create an array to hold all your shape definitions:

    var drawings=[];

Add shapes to the array:

    function addShape(shapename,color){
        drawings.push({
            shape:shapename,
            color:color
        });
        drawAll();
    }

To "undo", remove all elements of a specified shape from the array:

    function undoShape(shapename){
        var i=drawings.length-1;
        while(i>=0){
            if(drawings[i].shape==shapename){
                drawings.splice(i,1);
            }
            i--;
        }
        drawAll();
    }

Here is code:

[ props to @enhzflep for suggesting the method ]

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=1;

    var shapeWidth=30;
    var shapeHeight=30;
    var spacer=5;
    var drawings=[];

    function addShape(shapename,color){
        drawings.push({
            shape:shapename,
            color:color
        });
        drawAll();
    }

    function undoShape(shapename){
        var i=drawings.length-1;
        while(i>=0){
            if(drawings[i].shape==shapename){
                drawings.splice(i,1);
            }
            i--;
        }
        drawAll();
    }

    function drawAll(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for(var i=0;i<drawings.length;i++){
            var drawing=drawings[i];
            var x=i*shapeWidth;
            var y=50;
            switch(drawing.shape){
                case "rectangle":
                    drawRectangle(x,y,drawing.color);
                    break;
                case "circle":
                    drawCircle(x,y,drawing.color);
                    break;
            }
        }
    }


    function drawContainer(x,y){
        ctx.strokeStyle="lightgray";
        ctx.strokeRect(x,y,shapeWidth,shapeHeight);
    }

    function drawRectangle(x,y,color){
        drawContainer(x,y);
        ctx.fillStyle=color;
        ctx.fillRect(x+spacer,y+spacer,shapeWidth-2*spacer,shapeHeight-2*spacer);
    }

    function drawCircle(x,y,color){
        drawContainer(x,y);
        ctx.beginPath();
        ctx.arc(x+shapeWidth/2,y+shapeHeight/2,shapeWidth/2-spacer,0,Math.PI*2);
        ctx.closePath();
        ctx.fillStyle=color;
        ctx.fill();
    }

    function randomColor(){ 
        return('#'+Math.floor(Math.random()*16777215).toString(16));
    }

    $("#rect").click(function(){
        addShape("rectangle",randomColor());
    });
    $("#circle").click(function(){
        addShape("circle",randomColor());
    });
    $("#norect").click(function(){
        undoShape("rectangle");
    });
    $("#nocircle").click(function(){
        undoShape("circle");
    });

}); // end $(function(){});
</script>

</head>

<body>
    <button id="rect">Add Rect</button>
    <button id="circle">Add Circle</button>
    <button id="norect">Erase Rects</button>
    <button id="nocircle">Erase Circles</button>
    <canvas id="tools" width=300 height=40></canvas><br>
    <canvas id="erasers" width=300 height=40></canvas><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

undo the selected shape on the canvas

Question

1 answers

solution1
0 2014-01-17 18:44:09

undo the selected shape on the canvas

Question

1 answers

solution1 0 2014-01-17 18:44:09

solution1
0 2014-01-17 18:44:09