Рисование и сохранение изменений на холсте HTML5

Question

Я должен быть в состоянии сделать снимок и сохранить его. Мне было интересно, есть ли возможность разрешить пользователям рисовать только карту (форму)? Вот код complate: http://codepen.io/anon/pen/VYOXRW

var ctx, color = '#FF0000'; 
document.addEventListener("DOMContentLoaded", function() { 
setTimeout(function() { 
    newCanvas(); 
}, 1000); 
}, false); 
function newCanvas() { 
document.getElementById("content").style.height = window.innerHeight + 100; 
var canvas = '<canvas id="canvas" width="' + window.innerWidth + '" height="' + (window.innerHeight + 50) + '"></canvas>'; 
document.getElementById("content").innerHTML = canvas; 
ctx = document.getElementById("canvas").getContext("2d"); 
ctx.strokeStyle = color; 
ctx.lineWidth = 10; 
var image = new Image(); 
image.src = 'http://4.bp.blogspot.com/-_laBnztzAG8/Ub7mDK4Z3qI/AAAAAAAABu4/LBPUeAVeJcc/s1600/CA+KATHMANDU+VALLEY_HU.png'; 
image.onload = function() { 
    var canvas = document.getElementById("canvas"); 
    var iWidth = image.width/3; 
    var iHeight = image.height/3; 
    ctx.drawImage(image, (canvas.width - iWidth)/2, (canvas.height - iHeight)/2, iWidth, iHeight); 
}; 
drawTouch(); 
drawMouse(); 
} 
function selectColor(el) { 
color = window.getComputedStyle(el).color; 
ctx.beginPath(); 
ctx.strokeStyle = color; 
} 
var drawTouch = function() { 
var start = function(e) { 
    ctx.beginPath(); 
    x = e.changedTouches[0].pageX; 
    y = e.changedTouches[0].pageY; 
    ctx.moveTo(x, y); 
}; 
var move = function(e) { 
    e.preventDefault(); 
    x = e.changedTouches[0].pageX; 
    y = e.changedTouches[0].pageY; 
    ctx.lineTo(x, y); 
    ctx.stroke(); 
}; 
document.getElementById("canvas").addEventListener("touchstart", start, false); 
document.getElementById("canvas").addEventListener("touchmove", move, false); 
}; 
var drawMouse = function() { 
var clicked = 0; 
var start = function(e) { 
    clicked = 1; 
    ctx.beginPath(); 
    x = e.pageX; 
    y = e.pageY; 
    ctx.moveTo(x, y); 
}; 
var move = function(e) { 
    if (clicked) { 
     x = e.pageX; 
     y = e.pageY; 
     ctx.lineTo(x, y); 
     ctx.stroke(); 
    } 
}; 
var stop = function(e) { 
    clicked = 0; 
}; 
document.getElementById("canvas").addEventListener("mousedown", start, false); 
document.getElementById("canvas").addEventListener("mousemove", move, false); 
document.addEventListener("mouseup", stop, false); 
}; 
function saveBtn() { 
console.log(document.getElementById('canvas').toDataURL()); 
} 

Answer 1

Когда вы хотите, чтобы пользователь мог рисовать на изображении в неразрушающим способом, вы можете создать второй холст и использовать позиционирование CSS, чтобы поместить его на верх первого холста. Теперь пользователь может свободно рисовать на холсте выше, в то время как холст ниже не затрагивается и все еще видится через любые альфа-прозрачные области (кстати, когда вы вообще не собираетесь делать какие-либо операции с холстом на фоне, вы можете так же хорошо использовать простой старый <img>).

Когда вы хотели бы превратить оба полотна в одно изображение, которое вы можете сохранить, создать новый закадровым холст и рисовать как холсты к нему с drawImage (да, DrawImage можно использовать <canvas> как источник, так как это может принимать <img>). Затем вы можете использовать canvas.toDataURL для получения PNG или JPEG сжатой и base64-кодированной строки содержимого холста. Затем вы можете сохранить эту строку, но хотите.