javascript - Adding a grid on canvas bring some lag, optimisations?

Question

That's the code: http://jsfiddle.net/Mgq79/3/

  for (var xgrid = 0; xgrid < (canvasWidth / grid_step); xgrid++)
  {
    ctx.moveTo(xgrid * grid_step, 0);
    ctx.lineTo(xgrid * grid_step, canvasHeight);
  }
  for (var ygrid = 0; ygrid < (canvasHeight / grid_step); ygrid++)
  {
    ctx.moveTo(0, ygrid * grid_step);
    ctx.lineTo(canvasWidth, ygrid * grid_step);
  }

Long story short - after adding the grid, noticed some lag while rendering at small velocity values (<=150m/s) while it was almost smooth near upper 1000m/s limit. So how to optimise this part?

Thanks

ps link updated Also note that lag is very noticeable when trajectories are 3 or more

Answer 1

For me works about the same. It's only 1 ms difference which I'm sure you can't really notice.

I for one would really want to skip drawing that grid over and over and I would make the canvas transparent and have the grid as a repeating background image of the canvas container.

Or draw it once on a temp canvas and then use drawimage and just move it over to your canvas if redrawing it is necessary for some reason.

Also, you should use a path to draw the graph and not 1x1 rectangles. The path can be finished after all the points are there. Drawing and filling a rectangle at every iteration is bound to be slow.