lineWidth (a path styling attribute)

suggest change

context.lineWidth=lineWidth

Sets the width of the line that will stroke the outline of the path

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
	window.onload=(function(){
	
	// canvas related variables
	var canvas=document.getElementById("canvas");
	var ctx=canvas.getContext("2d");
	
	ctx.lineWidth=1;
	drawPolyline(50,50);
	
	ctx.lineWidth=5;
	drawPolyline(50,100);
	
	ctx.lineWidth=10;
	drawPolyline(50,150);
	
	// utility to draw a polyline 
	function drawPolyline(x,y){
	    ctx.beginPath();
	    ctx.moveTo(x,y);
	    ctx.lineTo(x+30,y+30);
	    ctx.lineTo(x+60,y);
	    ctx.lineTo(x+90,y+30);
	    ctx.stroke();
	}
	
}); // end window.onload
</script>
</head>
<body>
<canvas id="canvas" width=350 height=250></canvas>
</body>
</html>

Found a mistake? Have a question or improvement idea? Let me know.

Table Of Contents