How to Copy Contents of One Canvas to Another Canvas Locally

by

Actually you don’t have to create an image at all. drawImage() will accept a Canvas as well as an Image object.

//grab the context from your destination canvas
var destCtx = destinationCanvas.getContext('2d');
    
//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);

Way faster than using an ImageData object or Image element.

Note that sourceCanvas can be a HTMLImageElement, HTMLVideoElement, or a HTMLCanvasElement. As mentioned by Dave in a comment below this answer, you cannot use a canvas drawing context as your source. If you have a canvas drawing context instead of the canvas element it was created from, there is a reference to the original canvas element on the context under context.canvas.

Here is a jsPerf to demonstrate why this is the only right way to clone a canvas: http://jsperf.com/copying-a-canvas-element

More Related Contents:

  1. Canvas width and height in HTML5
  2. Html5 canvas drawImage: how to apply antialiasing
  3. Drawing an SVG file on a HTML5 canvas
  4. How can I convert an HTML element to a canvas element?
  5. HTML5 Canvas and Anti-aliasing [duplicate]
  6. Drawing text to with @font-face does not work at the first time
  7. Base64 PNG data to HTML5 canvas
  8. How to draw a rounded rectangle using HTML Canvas?
  9. What’s the best way to set a single pixel in an HTML5 canvas?
  10. How to change the opacity (alpha, transparency) of an element in a canvas element?
  11. How do I make a transparent canvas in html5?
  12. How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)
  13. Can you take a “screenshot” of the page using Canvas?
  14. canvas default size
  15. Gradient Stroke Along Curve in Canvas
  16. HTML5 Canvas background image
  17. HTML5 Canvas slows down with each stroke and clear
  18. Combining two or more Canvas elements with some sort of blending
  19. context.getImageData() operation is insecure
  20. What is the difference between SVG and HTML5 Canvas?
  21. How can I use custom fonts in an HTML5 Canvas element?
  22. Subpixel anti-aliased text on HTML5’s canvas element
  23. Draw SVG on HTML5 Canvas with support for font element
  24. Fast and responsive interactive charts/graphs: SVG, Canvas, other?
  25. How put percentage width into html canvas (no css)
  26. HTML5 Canvas and Line Width
  27. Clear Canvas Rect (but keep background)
  28. Poor anti-aliasing of text drawn on Canvas
  29. HTML5 Canvas – Fill circle with image
  30. HTML canvas with scrollbar

Leave a Comment