function drawSupport(ctx,i,th){ //first index is the canvas context; second is the support no.; line thickness		
	ctx.save();
	ctx.translate(supports[i].x,supports[i].y);
	ctx.scale(canvSets.featuresScale/canvSets.drawScale,canvSets.featuresScale/canvSets.drawScale);
	ctx.strokeStyle = "rgb(35, 35, 105)";
	ctx.lineWidth = th*canvSets.drawScale/canvSets.featuresScale/canvSets.drawScale;
	
	var flipSup=0;
	for (var j=0; j<=beams.length-1; j++ ){ //loop through all beams to find angle of the support
		console.log("cosy is", beams[j].cosy());
		if (beams[j].xSt==supports[i].x && beams[j].ySt==supports[i].y && beams[j].zSt==supports[i].z){
			if (beams[j].cosx()>0.88){flipSup=1}
			else if (beams[j].cosx()<-0.88){flipSup=2}
			else if (beams[j].cosy()<-0.88){flipSup=3};
			}
		else if (beams[j].xEnd==supports[i].x && beams[j].yEnd==supports[i].y && beams[j].zEnd==supports[i].z){
			if (beams[j].cosx()>0.88){flipSup=2}
			else if (beams[j].cosx()<-0.88){flipSup=1}
			if (beams[j].cosy()>0.88){flipSup=3};
			};	
		}
	
	if(supports[i].yRot==1 || supports[i].zRot==1){
		ctx.save();
		if (flipSup==1){ctx.rotate(-1.570796)};	
		if (flipSup==2){ctx.rotate(1.570796)};	
		if (flipSup==3){ctx.rotate(3.141592)};	
		ctx.beginPath();
		ctx.moveTo(0,0);
		ctx.lineTo(.2,-.2);
		ctx.lineTo(.5,-.2);
		ctx.lineTo(.5,-.5);
		ctx.lineTo(-.5,-.5);
		ctx.lineTo(-.5,-.2);
		ctx.lineTo(-.2,-.2);
		ctx.lineTo(0,0);
		ctx.stroke();
		ctx.restore();
		}
			
	else if(supports[i].yRes==0 && (supports[i].xRes==1 || supports[i].zRes==1)){ //vertical roller
		ctx.save();
		if (flipSup==2){ctx.rotate(3.141592)};	
		ctx.beginPath();
		ctx.moveTo(0,0);
		ctx.lineTo(-.5,-.5);
		ctx.lineTo(-.5,.5);
		ctx.lineTo(0,0);
		ctx.stroke();
		ctx.restore();
		}
		
	else if(supports[i].yRes==0 && (supports[i].xRes==0 || supports[i].zRes==0)){ //plot both triangles!
		ctx.beginPath();
		ctx.moveTo(0,0);
		ctx.lineTo(-.5,-.5);
		ctx.lineTo(-.5,.5);
		ctx.lineTo(0,0);
		ctx.stroke();
		ctx.beginPath();
		ctx.moveTo(0,0);
		ctx.lineTo(.5,-.5);
		ctx.lineTo(-.5,-.5);
		ctx.lineTo(0,0);
		ctx.stroke();
		}
		
	else if(supports[i].yRes==1 && (supports[i].xRes==0 || supports[i].zRes==0)){ //horizontal ruller
		ctx.save();	
		if (flipSup==3){ctx.rotate(3.141592)};	
		ctx.beginPath();
		ctx.moveTo(0,0);
		ctx.lineTo(.5,-.5);
		ctx.lineTo(-.5,-.5);
		ctx.lineTo(0,0);
		ctx.stroke();
		ctx.restore();
		}

	else{ //pin
		ctx.save();
		if (flipSup==1){ctx.rotate(-1.570796)};	
		if (flipSup==2){ctx.rotate(1.570796)};	
		if (flipSup==3){ctx.rotate(3.141592)};	
		ctx.beginPath();
		ctx.moveTo(0,0);
		ctx.lineTo(.5,-.5);
		ctx.lineTo(-.5,-.5);
		ctx.lineTo(0,0);
		ctx.stroke();
		ctx.restore();
		};
		
	//now add rollers:
	if(supports[i].yRes==0){ //vertical roller
		ctx.save();
		if (flipSup==2){ctx.rotate(3.141592)};	
		ctx.beginPath();
		ctx.arc(-.67,-.35,.15,0,2*Math.PI,true);
		ctx.stroke();	
		ctx.beginPath();
		ctx.arc(-.67,0,.15,0,2*Math.PI,true);
		ctx.stroke();	
		ctx.arc(-.67,.35,.15,0,2*Math.PI,true);
		ctx.stroke();	
		ctx.restore();
		};	
	if(supports[i].xRes==0 || supports[i].zRes==0){ //horizontal roller
		ctx.save();	
		if (flipSup==3){ctx.rotate(3.141592)};
		ctx.beginPath();
		ctx.arc(.35,-.67,.15,0,2*Math.PI,true);
		ctx.stroke();	
		ctx.beginPath();
		ctx.arc(0,-.67,.15,0,2*Math.PI,true);
		ctx.stroke();	
		ctx.beginPath();
		ctx.arc(-.35,-.67,.15,0,2*Math.PI,true);
		ctx.stroke();	
		ctx.restore();
		};	
	
	
		
	//drawLine(0,0,.5,-.5,1*canvSets.drawScale/canvSets.featuresScale,"black");
	//drawLine(.5,-.5,-.5,-.5,1*canvSets.drawScale/canvSets.featuresScale,"black");
	//drawLine(-.5,-.5,0,0,1*canvSets.drawScale/canvSets.featuresScale,"black");
	ctx.restore();
};