HTML5 Canvas API, Paper.js, Raphael.js, Processing.js: Performance, Benchmarks and a New Trick

An original benchmark posted here showed that Processing.js was lagging by 68-68% behind native Canvas API calls performing essentially the same thing.

I was curious where the bottleneck for Processing.js was in the original test so I exposed the processing canvas context to the sketch itself in the head of the document.

Then I simply used the native Canvas API calls from within the Processing.js draw loop like so:

//placed in head of document to expose processing canvas to sketch
var pctx = processingCanvas.getContext('2d');

//in processingjs draw loop
pctx.fillStyle = "#000";
pctx.fillRect(0, 0, 50, 50);
pctx.clearRect(0, 0, 100, 100);

My updated test is here and…

Using the native canvas api from within Processing.js is MUCH faster.

Perhaps the fastest (in my tests it outperformed the original Canvas API calls by 2-4% on Chrome and Android)!!!

Check this out to see how you can use the native Canvas API in your sketches for a performance boost!