webGL在事件處理程序中的繪製似乎清除畫布

Question

這是一個從webglfundamentals.com非常輕微改寫的介紹性示例。

http://codepen.io/anon/pen/mVYrZd

MOUSEDOWN在畫布上繪製一個新的矩形。先前繪製的矩形被清除。爲什麼？ for循環和事件處理函數調用完全相同的函數。

相關代碼：

// Draw 50 random rectangles in random colors. 
// They draw on top of each other, as expected. 
for (var i = 0; i < 50; i += 1) { 
    drawARandomRectangle(gl); 
} 

// Draw one rectangle on the canvas in response to a canvas mousedown. 
// The buffer seems to be cleared, only a single new rectangle shows. 
canvas.addEventListener("mousedown", function(e){ 
    drawARandomRectangle(gl); 
}); 

我已經想通了，初始化與preserveDrawingBuffer情況下會導致鼠標按下矩形現有矩形的頂部可以得出：

var gl = canvas.getContext("webgl", { 
    preserveDrawingBuffer: true 
}); 

但我也請注意0​​的性能很差，並且它不能很好地解釋爲什麼內循環調用和mousedown調用呈現不同。

Answer 1

使用preserveDrawingBuffer: true

var gl = canvas.getContext("webgl", { antialias: false, preserveDrawingBuffer: true}) 

細節這裏WebGL drawing failure after mouse click