Processing.js – strokeCap()

strokeCap()
Another week or two, and a bit of work toward the 0.3 release of my DPS909 project. This time it was strokeCap()'s turn to be ported to Processing.js (Pjs).
So here is the basic Processing example working in Pjs:


And here is the example running in the Processing Development Environment (PDE):

Squishy Innards
This is all done by setting canvas' lineCap attribute. lineCap has three possible values which correspond directly to those used by Processing so strokeCap()'s code looks just like this:

p.strokeCap = function strokeCap( set ){
    if ( set == p.ROUND ) {
        curContext.lineCap = 'round';
    } else if ( set == p.SQUARE ) {
        curContext.lineCap = 'butt';
    } else if ( set == p.PROJECT ) {
        curContext.lineCap = 'square';
    }
};

lineCap is also handled by canvas' state saving functions, which means Pjs' pushStyle() and popStyle() can already handle saving and restoring the setting as well.

A Different Starting Point
The main difference between canvas and Processing/Pjs is the default setting for lineCap. Canvas' default is “butt", which is “SQUARE" in Processing. Processing needs to default to “ROUND", which is “round" in canvas.

There was a bit of trouble getting the default working in Pjs. At first adding curContext.lineCap = 'round'; to function init didn't work. Al MacDonald (F1LT3R) was very quickly able to find where the problem was and fix it: it turns out function size recreated the canvas context every time it was called, which in turn reset all the attributes. Thanks, Al!

So now the default setting works very nicely in Pjs:


Compare to the same thing in PDE:

Useful Links

• GitHub commit where strokeCap() works


• Lighthouse ticket (will need to be reopened for code review)