Question

I am using the HTML canvas tag to draw around 3000, vector lines on a small area (900×500) the target platform is mobile which has inherently lower spec’d hardware. On my desktop I can make the 3000 vector lines render, using moveto and lineto in about 25ms. However on the mobile device it’s more like 700ms which is significantly slower. What is the most effective way to render these lines which make up a complex shape using canvas? Would the canvas pixel API be better suited to this task?
My current code looks something like this:

var myArray = []; //contains 3000 objects with X & Y & type
for(var i = 0; i<myArray.length; i++) {
    if(myArray.type = "moveTo") {
        canvasElement.moveTo(myArray[i].X, myArray[i].Y);
    } else {
        canvasElement.lineTo(myArray[i].X, myArray[i].Y);
    }
}
canvasElement.stroke();

Thanks

Answer 1

Are these lined connected to each other? If so, you could try rendering the shapes they produce using moveto, lineto, lineto, etc. this taking nearly 50% (or less) of the time.

For disconnected lines which are similar, e.g. 3 pixels long, horizontal, you could render small ‘sprites’ for the commonly occurring ones – it might be quicker to draw them as images then.

Otherwise, if you have a graphic of which only small portions change, you could try clipping to the region of change and redrawing only the lines which fall within it.