是否可以在 2D 画布上强制执行多个绘制操作（软件渲染）？

Question

我正在开发一款在 Chromecast 设备（没有硬件加速）上使用 HTML5 canvas 2D 上下文绘图的游戏。我注意到在一帧中绘制两个对象将触发包含它们的整个区域的重新绘制。作为“最坏情况”，假设我只想更改大画布元素的左上角和右下角像素的颜色。如果我使用两个单像素 fillRect 调用来执行此操作，它（至少是 WebKit/Blink）会将整个画布标记为脏，从而触发非常昂贵的绘制操作。我相信这应该链接到在 Chromium 中执行此逻辑的代码：

https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/html/HTMLCanvasElement.cpp&l=218

有什么方法可以说服浏览器实际执行两个小的绘制操作，而不是一个（过分）大的？或者这总是会更慢，尽管它的重新绘制明显更少？我已经尝试将元素放在彼此叠加的不同画布元素上，但浏览器似乎仍然捕捉到它并将它们批处理在一起（至少如 DevTools 中的重绘区域所示）。

Answer 1

据我所知，目前没有比这更好的了；一个主要缺点是也没有实现双缓冲，这会提高性能。我们将看到这些领域的进步。