Pen.js

Pen.js helps with drawing lines, cirlces and other shapes in canvas.

Quick Start

JavaScript

// Standard
(function () {

	var canvas = new fil.Canvas(),
		pen = new fil.Pen();

	var canvasNode = document.getElementById('canvas');
	canvas.init({ container : canvasNode });
	var ctx = canvas.context();

	pen.context(ctx); // Required when using Pen to draw things.

	ctx.strokeStyle = 'rgba(218,237,226,0.5)';

	pen.line(
		{ x : 10, y : 5 },
		{ x : 20, y : 30 }
	);

}());

// AMD
require(["Canvas", "Pen"], function (Canvas, Pen) {

	var canvas = new fil.Canvas(),
		pen = new fil.Pen();

	var canvasNode = document.getElementById('canvas');
	canvas.init({ container : canvasNode });
	var ctx = canvas.context();

	pen.context(ctx); // Required when using Pen to draw things.

	ctx.strokeStyle = 'rgba(218,237,226,0.5)';

	pen.line(
		{ x : 10, y : 5 },
		{ x : 20, y : 30 }
	);

});