// game_drawing_functions.php
<script>
function drawQuad(xc,yc,x1,y1,x2,y2,x3,y3,x4,y4,orient,strokeColor,fillColor,lineWidth) {
		a=orient;
		pnt=rotateVector(x1,y1,xc,yc,a);
		x1=pnt.x;
		y1=pnt.y
		pnt=rotateVector(x2,y2,xc,yc,a);
		x2=pnt.x;
		y2=pnt.y;
		pnt=rotateVector(x3,y3,xc,yc,a);
		x3=pnt.x;
		y3=pnt.y;
		pnt=rotateVector(x4,y4,xc,yc,a);
		x4=pnt.x;
		y4=pnt.y;
		ctx.beginPath();
		ctx.lineWidth   = lineWidth;
		ctx.strokeStyle=strokeColor;
		ctx.moveTo(x1,y1);
		ctx.lineTo(x2,y2);	
		ctx.lineTo(x3,y3);
		ctx.lineTo(x4,y4);
		ctx.closePath();
		ctx.stroke();
		ctx.beginPath();
		ctx.fillStyle=fillColor;
		ctx.moveTo(x1,y1);
		ctx.lineTo(x2,y2);
		ctx.lineTo(x3,y3);
		ctx.lineTo(x4,y4);
		ctx.closePath();		
		ctx.fill();
		/*
		var pt={x:x1,y:y1};
		drawPoint(pt,"red","white",0);
		pt={x:x2,y:y2};
		drawPoint(pt,"black","white",0);
		pt={x:x3,y:y3};
		drawPoint(pt,"blue","white",0);
		pt={x:x4,y:y4};
		drawPoint(pt,"yellow","white",0);
		*/	
}
function drawPoint(pt,color,borderColor,num) {
 		ctx.beginPath();
 		radius=3;
      	ctx.arc(pt.x, pt.y+000, radius, 0, 2 * Math.PI, false);
      	ctx.fillStyle = color;
      	ctx.fill();
      	ctx.lineWidth = 1;
      	ctx.strokeStyle = borderColor;
      	ctx.stroke();
		//ctx.fillStyle="red";
		//ctx.font="11px Arial";
		//var x=pt.xc.toFixed(2) ; 
		//var y=pt.yc.toFixed(2);		
		//ctx.fillText("["+num+"]("+x+","+y+")",x+5,y-10);
		//ctx.fillText("["+num+"]",x+5,y-10);
}	
function drawCircle(pt,radius,color,borderColor,borderThickness) {
 		ctx.beginPath();
      	ctx.arc(pt.x, pt.y+000, radius, 0, 2 * Math.PI, false);
      	ctx.fillStyle = color;
      	ctx.fill();
      	ctx.lineWidth = borderThickness;
      	ctx.strokeStyle = borderColor;
      	ctx.stroke();
}
function drawTriangle(points,bodyColor,outlineColor,tipColor){ // triangle with triangular tip when tipColor != 0
	ctx.beginPath();
	ctx.fillStyle=bodyColor;
	ctx.moveTo(points[0].x,points[0].y);
	ctx.lineTo(points[1].x,points[1].y);
	ctx.lineTo(points[2].x,points[2].y);
	ctx.closePath();
	ctx.fill();
	
	ctx.beginPath();	
	ctx.strokeStyle = outlineColor; 
	ctx.lineWidth   = 3;
	ctx.moveTo(points[0].x,points[0].y);
	ctx.lineTo(points[1].x,points[1].y);
	ctx.lineTo(points[2].x,points[2].y);
	ctx.closePath();
	ctx.stroke();
	if(tipColor!=0) {
		ctx.beginPath();
		ctx.fillStyle = tipColor;
		ctx.moveTo(points[0].x,points[0].y);
		ctx.lineTo(points[3].x,points[3].y);
		ctx.lineTo(points[4].x,points[4].y);
		ctx.closePath();
		ctx.fill();
  	 	ctx.beginPath();
		ctx.strokeStyle = outlineColor;
		ctx.lineWidth   = 3;
		ctx.lineTo(points[3].x,points[3].y);
		ctx.lineTo(points[4].x,points[4].y);
		ctx.closePath();
		ctx.stroke();
	}
}
function drawBow(xc,yc,x1,y1,x2,y2,x3,y3,x4,y4,orient,strokeColor,fillColor,lineWidth) {

		a=orient;
		pnt=rotateVector(x1,y1,xc,yc,a);
		x1=pnt.x;
		y1=pnt.y
		pnt=rotateVector(x2,y2,xc,yc,a);
		x2=pnt.x;
		y2=pnt.y;
		pnt=rotateVector(x3,y3,xc,yc,a);
		x3=pnt.x;
		y3=pnt.y;
		pnt=rotateVector(x4,y4,xc,yc,a);
		x4=pnt.x;
		y4=pnt.y;
				
		ctx.beginPath();
		ctx.lineWidth   = lineWidth;
		ctx.strokeStyle=strokeColor;
		ctx.moveTo(x1,y1);
		ctx.lineTo(x3,y3);	
		ctx.lineTo(x2,y2);
		ctx.lineTo(x4,y4);
		ctx.closePath();
		ctx.stroke();

		ctx.beginPath();
		ctx.fillStyle=fillColor;
		ctx.moveTo(xc,yc);
		ctx.lineTo(x3,y3);
		ctx.lineTo(x2,y2);
		ctx.closePath();		
		ctx.fill();
		
		ctx.beginPath();
		ctx.fillStyle=fillColor;
		ctx.moveTo(xc,yc);
		ctx.lineTo(x1,y1);
		ctx.lineTo(x4,y4);
		ctx.closePath();		
		ctx.fill();
			
}
</script>