Cannot clear canvas workspace in HTML 5

Question

Somehow I cannot get it the canvas clear in my canvas tag, it only clear some portion and i have put canvas.witdh and height as the argument. Originally it should clear all of it when a button is clicked and clearGraph() function is triggered and redraw. Please do help me. You can view it from here. http://jsfiddle.net/qH2Lr/1/

    function init() {

    // data sets -- set literally or obtain from an ajax call
    var dataName = [ "You", "Competitors" ];
    var dataValue = [ 2600, 4000];
        // set these values for your data
        numSamples = 2;
        maxVal = 5000;
        var stepSize = 1000;
        var colHead = 50;
        var rowHead = 60;
        var margin = 10;
        var header = "Millions"
       var can = document.getElementById("can");
        ctx = can.getContext("2d");
        ctx.fillStyle = "black"
        yScalar = (can.height - colHead - margin) / (maxVal);
        xScalar = (can.width - rowHead) / (numSamples + 1);
        ctx.strokeStyle = "rgba(128,128,255, 0.5)"; // light blue line
        ctx.beginPath();
        // print  column header
        ctx.font = "14pt Helvetica"
        ctx.fillText(header, 0, colHead - margin);
        // print row header and draw horizontal grid lines
        ctx.font = "12pt Helvetica"
        var count =  0;
        for (scale = maxVal; scale >= 0; scale -= stepSize) {
            y = colHead + (yScalar * count * stepSize);
            ctx.fillText(scale, margin,y + margin);
            ctx.moveTo(rowHead, y)
            ctx.lineTo(can.width, y)
            count++;
        }
        ctx.stroke();
        // label samples  ctx.shadowColor = 'rgba(128,128,128, 0.5)';
        ctx.shadowOffsetX = 20;
        ctx.shadowOffsetY = 1;
        // translate to bottom of graph and scale x,y to match data
        ctx.translate(0, can.height - margin);
        ctx.font = "14pt Helvetica";
        ctx.textBaseline = "bottom";
        for (i = 0; i < 4; i++) {
            calcY(dataValue[i]);
            ctx.fillText(dataName[i], xScalar * (i + 1), y - margin);
        }
        // set a color and a shadow
        ctx.fillStyle = "green";

        ctx.scale(xScalar, -1 * yScalar);
        // draw bars
        for (i = 0; i < 4; i++) {
            ctx.fillRect(i + 1, 0, 0.5, dataValue[i]);
        }

    }

    function calcY(value) {
        y = can.height - value * yScalar;
    }

    function clearGraph() {

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

        // Will always clear the right space
        ctx.clearRect(0, 0, canvas.width, canvas.height);


    }
</script>

Answer 1

You are making many changes to the context such as scale and translate.

These will affect clearRect() as well. I would suggest in this case to use the save() and restore() methods. save() stores the current state of the context incl. transforms:

ctx = can.getContext("2d");

ctx.save();    // after obtaining the context

... rest of code ...

ctx.restore(); // before clearing
ctx.clearRect(0, 0, can.width, can.height);

Now you can see it works as intended:

Modified fiddle

Of course, clearing right after drawing everything is probably not the real intention but to show that it do work (when you eventually need it - put it first in the code if you intend to redraw the graph).