// www.thestorff.de

// Zeichnet mehrere X(Y)-Funktionen
// in ein canvas-Element

function drawFunction(Element,Xarr,Yarr,Farbe,Para) {

if (Para["Xmax"]===undefined){Para["Xmax"]=100;}
if (Para["Ymax"]===undefined){Para["Ymax"]=100;}
if (Para["Xoffset"]===undefined){Para["Xoffset"]=0;}
if (Para["Yoffset"]===undefined){Para["Yoffset"]=0;}
if (Para["Xfenster"]===undefined){Para["Xfenster"]=900;}
if (Para["Yfenster"]===undefined){Para["Yfenster"]=500;}
if (Para["Xposi"]===undefined){Para["Xposi"]=60;}
if (Para["Yposi"]===undefined){Para["Yposi"]=60;}
if (Para["Xbereich"]===undefined){Para["Xbereich"]=800;}
if (Para["Ybereich"]===undefined){Para["Ybereich"]=400;}
if (Para["Xscala1"]===undefined){Para["Xscala1"]=100;}
if (Para["Xscala1Fa"]===undefined){Para["Xscala1Fa"]="#999";}
if (Para["Xscala2"]===undefined){Para["Xscala2"]=20;}
if (Para["Xscala2Fa"]===undefined){Para["Xscala2Fa"]="#999";}
if (Para["Xscala3"]===undefined){Para["Xscala3"]=10;}
if (Para["Yscala1"]===undefined){Para["Yscala1"]=100;}
if (Para["Yscala1Fa"]===undefined){Para["Yscala1Fa"]="#999";}
if (Para["Yscala2"]===undefined){Para["Yscala2"]=20;}
if (Para["Yscala2Fa"]===undefined){Para["Yscala2Fa"]="#999";}
if (Para["Yscala3"]===undefined){Para["Yscala3"]=10;} 
if (Para["ScalaBr1"]===undefined){Para["ScalaBr1"]=10;}
if (Para["ScalaBr2"]===undefined){Para["ScalaBr2"]=20;}
if (Para["ScalaBr3"]===undefined){Para["ScalaBr3"]=15;}
if (Para["Xraster1"]===undefined){Para["Xraster1"]=10;}
if (Para["Xraster1Fa"]===undefined){Para["Xraster1Fa"]="#bbb";}
if (Para["Xraster2"]===undefined){Para["Xraster2"]=2;}
if (Para["Xraster2Fa"]===undefined){Para["Xraster2Fa"]="#999";}
if (Para["Yraster1"]===undefined){Para["Yraster1"]=10;}
if (Para["Yraster1Fa"]===undefined){Para["Yraster1Fa"]="#bbb";}
if (Para["Yraster2"]===undefined){Para["Yraster2"]=2;}
if (Para["Yraster2Fa"]===undefined){Para["Yraster2Fa"]="#999";}
if (Para["Schrift"]===undefined){Para["Schrift"]="16px monospace";}
if (Para["Utext"]===undefined){Para["Utext"]="Funktion X(X)";}
if (Para["UtextFa"]===undefined){Para["UtextFa"]="#000";}
if (Para["UtextEin"]===undefined){Para["UtextEin"]=10;}
if (Para["Xtext"]===undefined){Para["Xtext"]="X-Achse";}
if (Para["XtextFa"]===undefined){Para["XtextFa"]="#000";}
if (Para["XtextEin"]===undefined){Para["XtextEin"]=10;}
if (Para["Ytext"]===undefined){Para["Ytext"]="Y-Achse";}
if (Para["YtextFa"]===undefined){Para["YtextFa"]="#000";}
if (Para["YtextEin"]===undefined){Para["YtextEin"]=10;}

// canvas element
var canvas=document.getElementById(Element);
// 2-D canvas type
var context=canvas.getContext("2d");

Xmulti=Para["Xbereich"]/Para["Xmax"];
Ymulti=Para["Ybereich"]/Para["Ymax"];

context.clearRect(0, 0, Para["Xfenster"], Para["Yfenster"]);
context.save();
context.translate (Para["Xposi"], Para["Yfenster"]-Para["Yposi"]);	// Nullpunkt

for (i=0; i<=Para["Xscala1"]; i++) {			// X-Scala
 context.beginPath();
 context.moveTo (i*Para["Xbereich"]/Para["Xscala1"], 0);
 if (i/Para["Xscala2"]==Math.round(i/Para["Xscala2"])) {	// ganz
  context.strokeStyle = Para["Xscala2Fa"];
  context.lineTo (i*Para["Xbereich"]/Para["Xscala1"], Para["ScalaBr2"]); 
 }
 else if (i/Para["Xscala3"]==Math.round(i/Para["Xscala3"])) {	// halb
  context.strokeStyle = Para["Xscala2Fa"];
  context.lineTo (i*Para["Xbereich"]/Para["Xscala1"], Para["ScalaBr3"]); 
 }
 else {						// klein
  context.strokeStyle = Para["Xscala1Fa"];
  context.lineTo (i*Para["Xbereich"]/Para["Xscala1"], Para["ScalaBr1"]); 
 }
 context.stroke();
}

for (i=0; i<=Para["Yscala1"]; i++) {			// Y-Scala
 context.beginPath();
 context.moveTo (0, -i*Para["Ybereich"]/Para["Yscala1"]);
 if (i/Para["Yscala2"]==Math.round(i/Para["Yscala2"])) {	// ganz
  context.strokeStyle=Para["Yscala2Fa"];
  context.lineTo (-Para["ScalaBr2"], -i*Para["Ybereich"]/Para["Yscala1"]); 
 }
 else if (i/Para["Yscala3"]==Math.round(i/Para["Yscala3"])) {	// halb
  context.strokeStyle=Para["Yscala2Fa"];
  context.lineTo (-Para["ScalaBr3"], -i*Para["Ybereich"]/Para["Yscala1"]); 
 }
 else {						// klein
  context.strokeStyle=Para["Yscala1Fa"];
  context.lineTo (-Para["ScalaBr1"], -i*Para["Ybereich"]/Para["Yscala1"]); 
 }
 context.stroke();
}

for (i=0; i<=Para["Xraster1"]; i++) {			// X-Raster
 context.beginPath();
 context.moveTo(i*Para["Xbereich"]/Para["Xraster1"], 0);
 if (i/Para["Xraster2"]==Math.round(i/Para["Xraster2"])) {	// ganz
  context.strokeStyle=Para["Xraster2Fa"];
 }
 else {						// halb
   context.strokeStyle=Para["Xraster1Fa"];
 }
  context.lineTo(i*Para["Xbereich"]/Para["Xraster1"], -Para["Ybereich"]); 
  context.stroke();
}

for (i=0; i<=Para["Yraster1"]; i++) {			// Y-Raster
  context.beginPath();
  context.moveTo(0, -i*Para["Ybereich"]/Para["Yraster1"]);
 if (i/Para["Yraster2"]==Math.round(i/Para["Yraster2"])) {	// ganz
  context.strokeStyle=Para["Yraster2Fa"];
 }
 else {						// halb
   context.strokeStyle=Para["Yraster1Fa"];
 }
  context.lineTo(Para["Xbereich"], -i*Para["Ybereich"]/Para["Yraster1"]); 
  context.stroke();
}

Anzahl=Xarr.length;
for (k=0; k<Anzahl; k++) {
 if (typeof Xarr[k] !== 'undefined'){
  Pixel=Xarr[k].length-1;
  if (Pixel >= 1) {
   context.beginPath();
   context.moveTo((Xarr[k][0]-Para["Xoffset"])*Xmulti, -(Yarr[k][0]-Para["Yoffset"])*Ymulti);
   for (i=0; i<Pixel; i++) {
    context.lineTo((Xarr[k][i+1]-Para["Xoffset"])*Xmulti, -(Yarr[k][i+1]-Para["Yoffset"])*Ymulti);
   }
   context.strokeStyle=Farbe[k];
   context.stroke();
  }
 }
}

context.font = Para["Schrift"];				// Schrift

context.fillStyle=Para["UtextFa"];			// Ueberschrift
context.textBaseline="top"; 
context.textAlign="center";
context.fillText(Para["Utext"], Para["Xfenster"]/2-Para["Xposi"], -Para["Yfenster"]+Para["Yposi"]+Para["UtextEin"]);

context.fillStyle=Para["XtextFa"];			// X-Text
context.textBaseline="bottom"; 
context.textAlign="center";
context.fillText(Para["Xtext"], Para["Xbereich"]/2, Para["Yposi"]-Para["XtextEin"]);

context.fillStyle=Para["Xscala2Fa"];			// X-Scala
context.textBaseline="top"; 
context.textAlign="start";
context.fillText(Para["Xoffset"], 0, Para["ScalaBr2"]);
context.textAlign="end"; 
context.fillText(Para["Xmax"]+Para["Xoffset"], Para["Xbereich"], Para["ScalaBr2"]);

context.rotate((3*Math.PI/2));			// 90° drehen

context.fillStyle=Para["YtextFa"];			// Y-Text
context.textBaseline="top"; 
context.textAlign="center";
context.fillText(Para["Ytext"],Para["Ybereich"]/2 ,Para["YtextEin"]-Para["Xposi"]);

context.fillStyle=Para["Yscala2Fa"];			// Y-Scala
context.textBaseline="bottom"; 
context.textAlign="start"; 
context.fillText(Para["Yoffset"], 0, -Para["ScalaBr2"]);
context.textAlign="end";
context.fillText(Para["Ymax"]+Para["Yoffset"], Para["Ybereich"], -Para["ScalaBr2"]);

context.restore();
}