How to capture a section of a canvas to a bitmap

I would like to capture a small part of a canvas as a bitmap. Is that possible? This is so that I can replace it after I draw another bitmap on that area. Once I am done with the bitmap I would like to replace t开发者_运维知识库he small bit of canvas that I drew on with the original piece.

Thanks!

The drawImage() method of contexts allows you to use an existing canvas as the source. It also allows you to specify sub-regions of the source "image" to draw. You can also create a new canvas element programmatically. Combine these, and you can create your own offscreen buffers and blit to/from them without needing to go through getImageData()/putImageData() or data URLs.

I've put an example of this online.

Note that while the example happens to append the dynamically-created canvas to the document so that you can see it (line 29 of the source), this is not necessary. Canvas elements created in the document function whether attached to the hierarchy or not.

In short:

function copyCanvasRegionToBuffer( canvas, x, y, w, h, bufferCanvas ){
  if (!bufferCanvas) bufferCanvas = document.createElement('canvas');
  bufferCanvas.width  = w;
  bufferCanvas.height = h;
  bufferCanvas.getContext('2d').drawImage( canvas, x, y, w, h, 0, 0, w, h );
  return bufferCanvas;
}

Edit: I benchmarked this technique versus getImageData/putImageData; if speed is important, use drawImage for blitting regions. Here's what I saw:

Benchmarks performed by saving and restoring a 125x180 region 10,000 times on OS X on a 2.8GHz Core i7 MacBook Pro. Your mileage may vary. Specifically, saving/restoring regions that are either much larger or smaller may result in different relative performance.

you can do this using .getImageData() and .putImageData()

Example

var canvas, ctx, img, imgd, col;
window.onload = function () {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    col = {
        0: '#000',
        .25: '#0099f9',
        .55: '#03f',
        1: '#000'
    };
    img = document.getElementById('img');
    var w = h = canvas.width = canvas.height = 200;

    var grad = ctx.createRadialGradient(w / 2, w / 2, 0, w / 2, w / 2, h);
    for (var i in col) {
        grad.addColorStop(i, col[i]); //just a funny mess, please don't bother :)
    }

    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, w, h);
    imgd = ctx.getImageData(50, 50, 20, 20); //caching the image Data

}

function draw() {
    ctx.drawImage(img, 50, 50, 20, 20); //drawing Image on to canvas
}

function redraw() {
    ctx.putImageData(imgd, 50, 50, 20, 20); //redraw the cached Image Data
}

and a simple Online Example, just you :)

Try it Here

have a look at a similar question here How to Copy Contents of One Canvas to Another Canvas Locally

What i suggest is write somthing like

var canvas1 = document.getElementById('canvas1');
var src     = canvas1.toDataURL("image/png"); // cache the image data source`

to save image in a variable and then retrive it later with

var img     = document.createElement('img'); // create a Image Element
img.src     = src;   //image source
var ctx1    = canvas1.getContext('2d');
ctx2.drawImage(img, 0, 0);  // drawing image onto second canvas element

Taken from here