Simulating a broad nib pen around a drawn letter skeleton using Paper.js

broad-nib-simulator.js

var path;
var penAngle = -20;

var textItem = new PointText(new Point(20, 30));
textItem.fillColor = 'black';
textItem.content = 'Click and drag to draw a line.';

function onMouseDown(event) {
	// If we produced a path before, deselect it:
	if (path) {
		path.selected = false;
	}

	path = new Path();
	path.strokeColor = 'red';
}

function onMouseDrag(event) {
	// Every drag event, add a point to the path at the current
	// position of the mouse:
	path.add(event.point);
	
	textItem.content = 'Segment count: ' + path.segments.length;
}

function onMouseUp(event) {
	var segmentCount = path.segments.length;
	
	// When the mouse is released, simplify it:
	path.simplify();
	var amount = 200;
        var length = path.length;
	for (var i = 0; i < amount + 1; i++) {
    		var offset = i / amount * length;

	    	var point = path.getPointAt(offset);
		var normalItem = path.getNormalAt(offset);
    		var normal = normalItem.rotate(penAngle - normalItem.angle) * 10;
    		var line = new Path({
        		segments: [point - normal, point + normal],
        		strokeColor: 'black'
    		});
	}
}