html5 - how to draw complex shapes on the html canvas tag with the best performance? -

I'm using the HTML canvas tag for about 3,000, vector lines on a small area (900x500) Mobile which is naturally less spec'd hardware, I can present 3000 vector lines on my desktop using about moveto and lineto in around 25 mms. However, on mobile devices it is like more than 700ms which is quite slow. What is the most effective way to present these rows, which make a complex shape using canvas? Will the Canvas Pixel API be better suited for this task? My current code looks like this:

  var myArray = []; // contains 3,000 objects with X and amp; Y & amp; amp; Type (var i = 0; i & lt; myArray.length; i ++) {if (myArray.type = "moveTo") {canvas element.movato (my array [ii] .x, myray [i] . why); } Else {canvasElement.lineTo (myArray [i] .X, myArray [i] .Y); }} Canvas element. Stroke ();  

thanks

are these related to each other Are you If so, you can try to interpret the shapes using moveto , lineto , lineto , etc. It's about 50% (or less) the time.

For disconnected lines that are similar, eg 3 pixels tall, horizontal, you can present small 'sprites' for people who usually happen - to attract them as images Can be fast.

Otherwise, if you have a graphic from which only small parts change, you can try clipping it in the area of ​​change and only underline those rows that fall within it.