Question

I am thinking about making a website with some fairly intense JavaScript/canvas usage and I have been looking at Processing.js and it seems to me that it would make manipulating the canvas significantly easier. Does anyone know any reasons why I shouldn’t use Processing.js? I understand that older browsers won’t be able to use it, but for now that’s ok.

Answer 1

As mentioned, IE is not supported by Processing.js (including IE8 beta). I’ve also found processing.js to be a bit slow in terms of performance, compared to just using canvas (especially if you’re parsing a string with Processing language, instead of using the javascript API).

I personally prefer the canvas API over the processing wrapper, because it gives more me control. For example:

The processing line() function is implemented like this (roughly):

function line (x1, y1, x2, y2) {   context.beginPath();   context.moveTo(x1, y1);   context.lineTo(x2, y2);   context.closePath();   context.stroke(); }; 

And you’d use it like this (assuming you’re using the javascript-exposed API):

var p = Processing('canvas') p.stroke(255)  ////Draw lines.../// p.line(0,0,10,10) p.line(10,10,20,10) //...and so on p.line(100,100,200,200) ////End lines//// 

Notice that every line() call has to open and close a new path, whereas with the canvas API you can draw all the lines within a single beginPath/endPath block, improving performance significantly:

context.strokeStyle = '#fff'; context.beginPath();  ////Draw lines.../// context.moveTo(0, 0); context.lineTo(10, 10); context.lineTo(20, 10); //...so on context.lineTo(200, 200); ////End lines...///  context.closePath(); context.stroke();