For double buffering of the canvas, create a second canvas element and draw on it. Then use the drawImage() method to draw the image onto the first canvas.
// canvas element var canvas1 = document.getElementById('canvas'); var context1 = canvas1.getContext('2d'); // buffer canvas var canvas2 = document.createElement('canvas'); canvas2.width = 250; canvas2.height =250; var context2 = canvas2.getContext('2d'); // create on the canvas context2.beginPath(); context2.moveTo(10,10); context2.lineTo(10,30); context2.stroke(); //render the buffered canvas context1.drawImage(canvas2, 0, 0);
The above is the detailed content of Does HTML5 Canvas support double buffering?. For more information, please follow other related articles on the PHP Chinese website!