jQuery / javascript在调用javascript函数后将html重置为以前的形式

Question

So basically I've created a function which animates a green check sign after a user clicks on button... The thing is I need need to revert the HTML to the old form once the onclick event is done in jquery post like this:

  $.post("/User/SaveWatchList", postData)
                .done(function (response) {
                    if (response == "AllFieldsRequired") {
                        ShowErrorMessage("All fields are required!");
                        return;
                    } else {
                        AnimateGreenCheck();    
                    }
                });

Please note the function called AnimateGreenCheck, which looks like following:

function AnimateGreenCheck() {
        var start = 100;
        var mid = 145;
        var end = 250;
        var width = 20;
        var leftX = start;
        var leftY = start;
        var rightX = mid - (width / 2.7);
        var rightY = mid + (width / 2.7);
        var animationSpeed = 20;

        var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
        ctx.lineWidth = width;
        ctx.strokeStyle = 'rgba(0, 150, 0, 1)';

        for (i = start; i < mid; i++) {
            var drawLeft = window.setTimeout(function () {
                ctx.beginPath();
                ctx.moveTo(start, start);
                ctx.lineTo(leftX, leftY);
                ctx.stroke();
                leftX++;
                leftY++;
            }, 1 + (i * animationSpeed) / 3);
        }

        for (i = mid; i < end; i++) {
            var drawRight = window.setTimeout(function () {
                ctx.beginPath();
                ctx.moveTo(leftX, leftY);
                ctx.lineTo(rightX, rightY);
                ctx.stroke();
                rightX++;
                rightY--;
            }, 1 + (i * animationSpeed) / 3);
        }

    }

And this is the "canvas" element on which it draws the green check sign:

   <div style="width:100%; text-align:center;">
        <canvas class="canvas" height="160"></canvas>
    </div>

I need to somehow repeat his process of drawing each time the user clicks the button and when the post is done...

How could I do this?

Answer 1

Okay so this did it :

   var canvas = $('.canvas')[0]; // or document.getElementById('canvas');
   canvas.width = canvas.width;

as described in the specifications:

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html