Forums » Help » Drawing 30 Thousand Rectangles, Fast

I'm using fillRect to draw about 30,000 4 x 4px rectangles on each frame to an offscreen canvas and later copy it to the main canvas in the draw phase.
on update():

  this.bContext.clearRect(0,0,this.canvasWidth,this.canvasHeight);
  var ctx = this.bContext; //bContext is the context of my offscreen canvas
  var s = this.scale; //I use 4
  for (var y = parcelY;y<parcelEndY;y++) {
	for (var x = parcelX;x<parcelEndX;x++) {
		var grainID = this.sandbox.parcel[y][x];
		ctx.fillStyle = this.sandbox.gd.color[grainID];
		ctx.fillRect((x-parcelX)*s,(y-parcelY)*s,s,s);
	}
  }

later in draw()

ig.system.context.drawImage(this.bCanvas,-offsetX,-offsetY);

Although the speed is OK, I wonder if there is a faster way to make it. Even on my desktop gaming PC, FPS begins to drop after about 20,000~ tiles

My understanding is that when you're doing that many canvas draws each frame, performance will suffer.

Perhaps it is something which WebGL would be better optimized to handle?

Or perhaps what you're trying to accomplish could be done using fewer draws if you rethink the problem?

First thing I would try is sorting those rectangles by color, i.e. make sure you only change fillStyle every once in a while instead of every inner loop iteration.

@Joncom: me not know WebGL :( And no energy or time to learn it at the moment.

@drhayes: So you think changing style every time slows it down. Sounds logical, I'll take a look at it. Maybe I can at least draw the most used tiles in seperate loops with only one change, worth trying.