<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.border {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" class="border" width="300px" height="200px"></canvas>
<script>
// function getMousePos(canvas, evt) {
// var rect = canvas.getBoundingClientRect();
// return {
// x: evt.clientX - rect.left,
// y: evt.clientY - rect.top
// };
// }
// var c = document.getElementById("canvas");
// var ctx = c.getContext("2d");
// ctx.beginPath();
// ctx.moveTo(20, 20);
// ctx.bezierCurveTo(-40, 110, 110, 110, 50, 20);
// ctx.stroke();
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// var drawingFlag = false;
//
// var startPoint = null;
var image = new Image();
image.src = canvas.toDataURL();
context.beginPath();
context.moveTo(20, 20);
context.lineTo(50, 50);
context.stroke();
context.drawImage(image, 0, 0);
// canvas.onmousemove = function (event) {
// if (drawingFlag) {
// context.restore();
//
// var endPoint = getMousePos(canvas, event);
//
// context.beginPath();
// context.moveTo(startPoint.x, startPoint.y);
// context.lineTo(endPoint.x, endPoint.y);
// context.stroke();
// }
// };
//
// canvas.onmousedown = function (event) {
// context.save();
//
// console.log('saved');
//
// drawingFlag = true;
//
// startPoint = getMousePos(canvas, event);
// };
// canvas.onmouseup = function() {
// drawingFlag = false;
//
// startPoint = null;
// };
</script>
</body>
</html>Привет. Хочу сохранить пустой холст, нарисовать что-то и откатиться до сохраненного варианта. Картинка успешно сохраняется (через console.log() смотрел), только вот с загрузкой проблема - по идеи, после загрузки должен быть пустой холст, но нет - нарисованная линия остается нетронутой. Никаких ошибок в консоле нет. В чем может быть дело? Спасибо!
