html5: copy a canvas to image and back

by

The drawImage() method can draw to a canvas using another canvas instead of an image.

You could create a ‘backup’ canvas, of the same size as your original, draw the first one to there and then draw that one back to the original when you need it.

e.g.

// Assume we have a main canvas
// canvas = <main canvas>
ctx = canvas.getContext('2d');
..

// create backing canvas
var backCanvas = document.createElement('canvas');
backCanvas.width = canvas.width;
backCanvas.height = canvas.height;
var backCtx = backCanvas.getContext('2d');

// save main canvas contents
backCtx.drawImage(canvas, 0,0);

..

// restore main canvas
ctx.drawImage(backCanvas, 0,0);

More Related Contents:

  1. Drawing an image from a data URL to a canvas
  2. HTML5 Canvas Rotate Image
  3. HTML5 Pre-resize images before uploading
  4. Resize image with javascript canvas (smoothly)
  5. How do you stretch an image to fill a while keeping the image’s aspect-ratio?
  6. Can I get image from canvas element and use it in img src tag?
  7. Load image from url and draw to HTML5 Canvas
  8. Wrap an image around a cylindrical object in HTML5 / JavaScript
  9. canvas- Cropping images in different shapes
  10. How to provide dynamic HTML in PHP?
  11. Canvas width and height in HTML5
  12. Change color of PNG image via CSS?
  13. How to draw an inline svg (in DOM) to a canvas?
  14. How to draw a rounded rectangle using HTML Canvas?
  15. How to convert BASE64 string into Image with Flutter?
  16. Converting a PDF to PNG
  17. How do I make a transparent canvas in html5?
  18. Can itextsharp.xmlworker render embedded images?
  19. Gmail blocking small embedded inline images in email template
  20. Width 100% with white borders around it. WHy?
  21. getting mouse position with javascript within canvas
  22. How to use p:graphicImage with StreamedContent within p:dataTable? [duplicate]
  23. draw 10,000 objects on canvas javascript
  24. What is the difference between “JPG” / “JPEG” / “PNG” / “BMP” / “GIF” / “TIFF” Image?
  25. How much data / information can we save / store in a QR code?
  26. How much faster is it to use inline/base64 images for a web site than just linking to the hard file?
  27. How put percentage width into html canvas (no css)
  28. Setting the image `width: 0` hides it, while `width: 0%` makes it occupy the space, too
  29. How to determine if a photo is corrupted?
  30. HTML canvas with scrollbar

Leave a Comment