Автосохранение %)
<!DOCTYPE html>
<html>
<head>
<script>
(function () {
let canvas = null
document.addEventListener('DOMContentLoaded', function () {
canvas = document.getElementById('c1')
var ctx = canvas.getContext('2d');
var myColor = 'black';
let localStorageImage = localStorage.getItem('img')
console.log('localStorageImage', localStorageImage)
if (localStorageImage) {
var img = new Image();
img.src = localStorageImage;
img.onload = function () {
ctx.drawImage(img, 0, 0);
}
}
canvas.onmousedown = function () {
canvas.onmousemove = function (e) {
var x = e.offsetX,
y = e.offsetY;
ctx.fillStyle = myColor;
ctx.fillRect(x - 5, y - 5, 10, 10);
}
canvas.onmouseup = function () {
canvas.onmousemove = null;
}
}
document.getElementById('clear').addEventListener('click', function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
localStorage.removeItem('img')
})
});
window.onunload = function () {
if (canvas) {
var imageURI = canvas.toDataURL("image/jpg");
localStorage.setItem('img', imageURI);
}
return null
};
})()
</script>
</head>
<body>
<canvas id='c1' width='400' height='200'></canvas>
<button id='clear' type='button'>clear</button>
</body>
</html>