Does HTML5/Canvas Support Double Buffering?

by

A very simple method is to have two canvas-elements at the same screen location and set visibility for the buffer that you need to show. Draw on the hidden and flip when you are done.

Some code:

CSS:

canvas { border: 2px solid #000; position:absolute; top:0;left:0; 
visibility: hidden; }

Flipping in JS: 

Buffers[1-DrawingBuffer].style.visibility='hidden';
Buffers[DrawingBuffer].style.visibility='visible';

DrawingBuffer=1-DrawingBuffer;

In this code the array ‘Buffers[]’ holds both canvas-objects. So when you want to start drawing you still need to get the context:

var context = Buffers[DrawingBuffer].getContext('2d');

More Related Contents:

  1. Using HTML5/Canvas/JavaScript to take in-browser screenshots
  2. Capture HTML Canvas as gif/jpg/png/pdf?
  3. Resizing an image in an HTML5 canvas
  4. Get pixel color from canvas, on mousemove
  5. Why does canvas.toDataURL() throw a security exception?
  6. Zoom Canvas to Mouse Cursor
  7. Zoom in on a point (using scale and translate)
  8. how to save canvas as png image?
  9. HTML5 Canvas to PNG File
  10. Cross-origin data in HTML5 canvas
  11. Uploading ‘canvas’ image data to the server
  12. html 5 canvas LineTo() line color issues
  13. HTML5 Canvas camera/viewport – how to actually do it?
  14. HTML5 canvas ctx.fillText won’t do line breaks?
  15. Is it possible to programmatically detect size limit for data url?
  16. What is the current state of the art in HTML canvas JavaScript libraries and frameworks? [closed]
  17. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  18. Detect if user clicks inside a circle
  19. Detect if user clicks inside a circle
  20. addEventListener for keydown on Canvas
  21. Javascript function to Rotate a base 64 image by X degrees and return new base64
  22. How to save canvas animation as gif or webm?
  23. canvas.toDataURL() Security Error The operation is insecure
  24. clearing circular regions from HTML5 Canvas
  25. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  26. Snap edges of objects to each other and prevent overlap
  27. HTML5 Canvas translate(0.5,0.5) not fixing line blurryness
  28. HTML Canvas Full Screen
  29. javascript: upload image file and draw it into a canvas
  30. Extracting single frames from an animated GIF to canvas

Leave a Comment