Question

I’m using this tutorial right now and I got it working perfectly, but my only concern is that it’s a bit slow. I have a 600×600 canvas and when using the fill tool it will take about 2 seconds to fill the canvas. In Microsoft Paint to fill a canvas of the size is instant and to fill a canvas 10x that size (6000×6000) is still slightly shorter at around 1 second.

Is this just a limitation of javascript and the canvas element or could it be optimized to be near the speeds of desktop programs like MS Paint? I profiled it with Firebug and this function seems to be one of the main bottlenecks, but it does have to run every iteration so..

function matchStartColor(pixelPos, startR, startG, startB) {
    var r = colorLayerData.data[pixelPos];
    var g = colorLayerData.data[pixelPos + 1];
    var b = colorLayerData.data[pixelPos + 2];

    return (r == startR && g == startG && b == startB);
} 

Answer 1

MS Paint is written in native code (C or C++ converted to machine code), which is far faster and, if correctly written, more efficient at rendering than canvas/javascript. Consider also that MS Paint might use the video rendering facilities of the hardware on the computer, which I don’t think canvas does by default in most browsers.

Also, MS Paint’s flood/filling algorithm may be different than the one you’re using. There’s always more than one way to achieve something. Have you tried a simple line by line scan, filling in white pixels as you go? You could try it, just for benchmarking purposes.