如何一次将多个矩形绘制到画布中？

Question

I'm drawing a large number (~20000) of rectangles to a HTML5 canvas using drawRect, each at a different, predetermined position. I'm doing this from a loop:

for (var i = 0; i < 100; ++i) {
    for (var j = 0; j < 200; ++j) {
        context.fillStyle = '#000000';
        context.fillRect(i * 8, j * 2, 6, 1);
    }
}

Working demo on JSFiddle

This snippet draws 100 bars into a 800px wide canvas, each of them 6px wide, and each of them consisting of numerous small (1x6) rectangles stacked below each other: a static count of 200 of them in the provided example, but a dynamically changing count in my application (hence the need for rerendering them).

This takes a few tens of milliseconds, nothing serious by itself. But this entire process is invoked repeatedly, which affects performance significantly , and not in the good way.

Is there a solution or workaround to make, say, such a bar be drawn in one canvas instruction, hopefully exploiting hardware acceleration much better?

The rectangles each receive a glow in my app, so slicing through them horizontally is not a good approach. I already tried using an offscreen canvas, drawing there, and rendering it's image output to the main canvas, but there's no noticable performance gain.

Answer 1

You can initialize useful variables like this:

var context = canvas.getContext("2d");
var map = context.getImageData(startX, startY, width, height);

where canvas is the return value for something like document.getElementById("myCanvas") .

startX is the start x, startY is the start y. You can use 0 as values for them, but I prefer to not assume that this starts at the left-top point of the canvas. width is the width and height is the height. Now, you can have your loop and set values, like this:

map.data[4 * index] = r; //red
map.data[4 * index + 1] = g; //green
map.data[4 * index + 2] = b; // blue

when you are done with your loop, save things, like this:

context.putImageData(map, startX, startY);

The speed should be improved, since you are reading only once and drawing only once. As about the loops, you are just setting values, which is a cheap operation compared to drawing into the canvas. So, the idea of this optimization is, to: read things at once, set the values in a loop and draw only once instead of drawing each time you get some input. You can also omit reading the relevant parts and generate the data yourself, but I decided to show you how you can read data if you need to know something about the already drawn things.

Answer 2

使自己成为包含单个全高度条的单个（屏幕外）画布图像，然后对于每个动态高度条，仅将所需数量的垂直像素复制到屏幕画布上。

Answer 3

Seeing that this looks some kind of background over which you are going to draw something else, have you considered converting this into a static image and setting the canvas background to this? You could turn off / on the background or whatever you draw on the canvas is going to overlap the background in the areas where the fill / draw happens.

Of, if you are going to adjust this dynamically, a separate canvas element positioned exactly under another one would also be something to consider.