CODEWITHSUNDEEP
javascriptcsshtmlcanvas
user3188826
user3188826

Reputation: 53

I am trying to implement undo option in my canvas

I am trying to implement undo and redo options in my canvas.I am using the following code in my program:

var cPushArray = new Array();
var cStep = -1;
function cPush()
{
    cStep++;
    if (cStep < cPushArray.length)
    {
        cPushArray.length = cStep;
    }
    cPushArray.push(document.getElementById("drawingCanvas").toDataURL());
}

function cUndo()
{
    if(cStep > 0)
    {
        cStep--;
        var canvasPic = new Image();
        canvasPic.src = cPushArray[cStep];
        canvasPic.onload = function() { ctx.drawImage(canvasPic,0,0);}
    }
}
function cRedo()
{
    if(cStep < cPushArray.length-1)
    {
        cStep++;
        var canvasPic = new Image();
        canvasPic.src = cPushArray[cStep];
        canvasPic.onload = function() {ctx.drawImage(canvasPic,0,0);}
    }
}

But I am unable to draw anything on my canvas if I am calling the cPush() method. Can u please tell me where am I wrong in the above code.

Upvotes: 1

Views: 178

Answers (1)

JerryDDG
JerryDDG

Reputation: 61

Do not use onload event, because it was only touched off by the DOM ready event.

var canvasPic = new Image();
canvasPic.src = cPushArray[cStep];
//if ctx has get the context of canvas, draw the pic immediately
ctx.drawImage(canvasPic,0,0);

Upvotes: 1

Related Questions