const context = this.element.getContext('2d');
const parentPoint = {x: this.element.offsetLeft, y: this.element.offsetTop};
let draw = false;
let cancelPromise = null;
this.element.onmousedown = (e) => {
if (e.button == 0) {
draw = true;
startPath(context, {x: e.pageX, y: e.pageY}, parentPoint);
clearTimeout(cancelPromise);
cancelPromise = null;
}
};
this.element.onmouseup = (e) => {
if (e.button == 0) {
draw = false;
finishPath(context, {x: e.pageX, y: e.pageY}, parentPoint);
cancelPromise = this.takeSnapshotAfter(5000);
}
};
this.element.onmousemove = (e) => {
@@ -45,10 +50,14 @@ export default class Canvas {
const touch = e.touches[0];
draw = true;
startPath(context, {x: touch.pageX, y: touch.pageY}, parentPoint);
clearTimeout(cancelPromise);
cancelPromise = null;
};
this.element.ontouchend = (e) => {
draw = false;
finishPath(context, null, parentPoint);
cancelPromise = this.takeSnapshotAfter(5000);
};
this.element.ontouchmove = (e) => {
const touch = e.touches[0];
@@ -57,6 +66,15 @@ export default class Canvas {
}
};
}
takeSnapshotAfter(millis) {
return setTimeout(this.snapshot, millis, this.element);
}
snapshot(element) {
let url = element.toDataURL();
console.log(url);
}
}
function startPath(context, point, parentPoint) {
