Drawing Lines Onto HTML5 Canvas

There are a few things I want to quickly fix on my Sierpinski triangle JavaScript. I reworked how I drew the triangle onto the canvas this morning and I like how it turned out. Next I’m going to attempt to dynamically plot an equilateral triangle onto the canvas.

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
						
/* 
    draw()
     - Draws a triangle from three given points.
     - Is able to a set fill color.
     - Is able to a set line color.
     - Is able to a set line width. 
*/
function draw( pointA, pointB, pointC, fillStyle, strokeStyle, lineWidth ){

	// Setting start point
	context.moveTo( pointA.x, pointA.y );

	// Connecting the points
	context.lineTo( pointB.x, pointB.y );
	context.lineTo( pointC.x, pointC.y );
	context.lineTo( pointA.x, pointA.y );
							
	// Line style variables may be false 
	if( fillStyle != false ){
		context.fillStyle = fillStyle;
		context.fill();
	}

	if( strokeStyle != false )
		context.strokeStyle = strokeStyle;

	if( lineWidth != false )
		context.lineWidth = lineWidth;

	// Draws the line
	context.stroke();
}

draw( {x: 20, y: 20}, {x:20, y:60}, {x:60, y:20}, false, false, false );
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s