html5: скопируйте холст в изображение и обратно

Есть несколько способов сделать это: методы getImageData и putImageData Справка, однако putImageData и getImageData работают довольно медленно. Другой способ - сохранить данные в image в памяти и вызвать их из того, что намного быстрее. Третий способ - это тот, который упоминался выше andrewmu, который включает копирование в другой элемент холста. Я включил примеры для первого и второго типа.

Метод изображения в памяти

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    savedData = new Image();

function save(){
    // get the data
    savedData.src = canvas.toDataURL("image/png");
}

function restore(){
    // restore the old canvas
    ctx.drawImage(savedData,0,0)
}

метод getImageData putImageData

// Setup our vars, make a new image to store the canvas data
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    canvasData = '';

function save(){
    // get the data
    canvasData = ctx.getImageData(0, 0, 100, 100);
}

function restore(){
    // restore the old canvas
    ctx.putImageData(canvasData, 0, 0);
}

Добавлено изображение на холст

var image = new Image();
image.src = "1.jpg";
image.onload = function() {
context.drawImage(image, 0, 0);
};