Question

I am trying to draw a simple line in html5 and noticed the following problem.

The code below works great. Draws the line correctly

    topcanvas = document.getElementById("topborder");
topcontext = topcanvas.getContext("2d");

topcontext.clearRect(0, 0, topcanvas.width, topcanvas.height);
    topcontext.moveTo(1, 0);
    topcontext.lineTo(4,0);
    topcontext.lineWidth = 3;
topcontext.strokeStyle = "#ff0000";
topcontext.stroke();

The code below should do the exactly same but not sure why, it draws the first line and then I dont see any change. the output is the line from (1000,0) to (4,0) where as I expect the end result to be (1,0) to (4,0)

    topcanvas = document.getElementById("topborder");
topcontext = topcanvas.getContext("2d");

    topcontext.clearRect(0, 0, topcanvas.width, topcanvas.height);
    topcontext.moveTo(1000, 0);
    topcontext.lineTo(4,0);
    topcontext.lineWidth = 3;
topcontext.strokeStyle = "#ff0000";
topcontext.stroke();

topcontext.clearRect(0, 0, topcanvas.width, topcanvas.height);
    topcontext.moveTo(1, 0);
    topcontext.lineTo(4,0);
    topcontext.lineWidth = 3;
topcontext.strokeStyle = "#ff0000";
topcontext.stroke();

The canvas width is 1000 and height 3

Answer 1

To clear canvas do the following:

topcanvas.width=topcanvas.width;