HTML Canvas : I am posting my code. Ifyou run this code- To draw anything on canvas,please click on

HTML Canvas: I am posting my code. Ifyou run this code- To draw anything on canvas,please click on “Start” Button and to use”Load” button, click on “Start” button, then load.It will load last picture. But, why it is always loadingonly one specific line? What’s the problem in my code? Andcould you please modify / addsome code so that after drawing the picture on canvas, wecan save it. So there will be one “Save” button, which will allowus to save the picture from canvas to our PC. (Please please please, do not use todataURL tosave the pic from canvas. It will be helpful, if you uselineTo,moveTo, JS array to do it.) Kindly helpme.

var commands = [“moveTo”, 30, 50, “lineTo”, 100, 70];
var start = 0;
var c;
var ctx ;
var i=0; function h() {
if (commands[i]==”moveTo”)
ctx.moveTo(commands[i+1], commands[i+2]);
i=i+3;
if (commands[i]==”lineTo”)
ctx.lineTo(commands[i+1], commands[i+2]);
ctx.stroke();
} function f(event) {
if (start==1) {
ctx.moveTo(event.offsetX, event.offsetY);
start = 0;
}
else {
var p = document.getElementById(“demo”);
p.innerHTML = “x =”+event.offsetX;
//ctx.moveTo(0,0);
ctx.lineTo(event.offsetX, event.offsetY);
ctx.stroke();
}
} function g() {
start=1;
} function s() {
c = document.getElementById(“can”);
ctx = c.getContext(“2d”);
}

onclick=”s()”>START width=”500″ height=”300″
style=”background-color:powderblue;”
onmousedown=”f(event)”>

onclick=”g()”>New Start Point
onclick=”h()”>LOAD

Attached