Does Html5/Canvas Support Double Buffering

Does HTML5/Canvas Support Double Buffering?

The following helpful link, in addition to showing examples and advantages of using double buffering, shows several other performance tips for using the html5 canvas element. It includes links to jsPerf tests, which aggregate test results across browsers into a Browserscope database. This ensures that the performance tips are verified.

http://www.html5rocks.com/en/tutorials/canvas/performance/

For your convenience, I have included a minimal example of effective double buffering as described in the article.

// canvas element in DOM
var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');

// buffer canvas
var canvas2 = document.createElement('canvas');
canvas2.width = 150;
canvas2.height = 150;
var context2 = canvas2.getContext('2d');

// create something on the canvas
context2.beginPath();
context2.moveTo(10,10);
context2.lineTo(10,30);
context2.stroke();

//render the buffered canvas onto the original canvas element
context1.drawImage(canvas2, 0, 0);

Do we need to implement double buffering ourselves with canvas?

You absolutely do not need to implement double buffering yourself and doing so would be a waste of time and performance.

Lucky for us every canvas implementation implements it behind-the-scenes for you.

Here's a simple example of it in action: http://jsfiddle.net/HYVLj/

when using double buffering to draw image on canvas, cannot get the complete image?

I change secondaryCanvas.weight=c.weight; to secondaryCanvas.width=c.width; and your code seems to work now.

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Decorate</title></head><body><div class="content-box"><canvas id="canvas" width="360" height="740" style="border:1px solid #d3d3d3"></canvas>
</div><script>var c=document.getElementById("canvas");var ctx = c.getContext("2d");
var secondaryCanvas=document.createElement("canvas");var secondaryCtx=secondaryCanvas.getContext("2d");
secondaryCanvas.width=c.width;secondaryCanvas.height=c.height;


var bgimg=new Image();bgimg.src= "https://picsum.photos/360/740"bgimg.onload=function() {secondaryCtx.drawImage(bgimg, 0, 0);ctx.drawImage(secondaryCanvas,0,0);}</script></body></html>

How to buffer graphics for an html5 canvas

From http://kaioa.com/node/103

var renderToCanvas = function (width, height, renderFunction) {
    var buffer = document.createElement('canvas');
    buffer.width = width;
    buffer.height = height;
    renderFunction(buffer.getContext('2d'));
    return buffer;
};

Rendering on html5 canvas takes cosumes too much time, buffering barely helps

Doing real-time light calculation in software is always a performance killer. Did you consider using a real 3d engine instead which does the light calculation on the video card? Yes, Javascript can do that now - this new feature is called WebGL.

When you just need a faster way to apply your lightmap, you could manipulate the RGB values of your canvas directly instead of using fillRect. You can use getImageData to get an array of raw 8 bit RGBA values of your canvas. You can then manipulate this array and put it back with putImageData.

Does Html5/Canvas Support Double Buffering