Question

Does anyone have experience with either or both of these node.js libraries? Curious to hear success or difficulties with each one.

Answer 1

LearnBoost is one of the most prolific node module developers in the community and for that reason I went with node-canvas over node-o3-canvas.

I used node-canvas to slice up an image into tiles on the server and send them back to the client. Everything works just like you would expect. Here is a sample of the kind of code you might write:

helper = function(x, y, canvas) {
    return function(err, str) {
        if (!tiles[x]) {
            tiles[x] = [];
        }

        tiles[x][y] = { 
            data: str
            , buffer: canvas.toBuffer()
            , covered: true 
        };
    };
};  

for (y = 0; y < tilesPerColumn; y += 1) {
    for (x = 0; x < tilesPerRow; x += 1) {
        //Create a new tile canvas each time so they don't run over each other
        tCanvas = new Canvas(chunkSize, chunkSize);
        tCtx = tCanvas.getContext('2d');

        xOffSet = chunkSize * x;
        yOffSet = chunkSize * y;

        //Save a set of uncovered tiles to store in memory
        tCtx.drawImage(img, xOffSet, yOffSet, chunkSize, chunkSize, 0, 0, chunkSize, chunkSize);
        tCanvas.toDataURL(helper(x, y, tCanvas));        
    }
}

The only gotchas I had were:

• If you are using the async methods in node-canvas, you need to be careful to allocate new canvas/context instances so as not interrupt one that may be writing/drawing.
• For some reason, I was never able to get node-canvas’s Image() object to work correctly when using server-side base64 encoded images. My issue was that the onLoad event would not fire when the src property was assigned a base64 string. I didn’t spend too much time fighting this, and instead wrote the images out to temporary files to work around the problem.