I’m trying to draw on a canvas. But I don’t see the line on this one.

My code looks like this in js:

var canvas = document.getElementById(‘signature-pad’);

if (canvas != null) {
var context = canvas.getContext(‘2d’, { willReadFrequently: true });

var pixels = [];
var cpixels = [];
var xyLast = {};
var xyAddLast = {};
var calculate = false;

if ( contractData[“signature”] != null
contractData[“signature”] != “”
contractData[“signature”].length > 0) {
var image = new Image();

image.onload = function() {
context.drawImage(image, 0, 0);
};

image.src = “data:image/jpeg;base64,” + contractData[“signature”];
}

resizeCanvas();

{

function remove_event_listeners() {
console.log(‘H1’);

canvas.removeEventListener(‘mousemove’, on_mousemove, false);
canvas.removeEventListener(‘mouseup’, on_mouseup, false);
canvas.removeEventListener(‘touchmove’, on_mousemove, false);
canvas.removeEventListener(‘touchend’, on_mouseup, false);

document.body.removeEventListener(‘mouseup’, on_mouseup, false);
document.body.removeEventListener(‘touchend’, on_mouseup, false);
}

function get_coords(e) {
console.log(‘H2’);

var x, y;

if (e.changedTouches && e.changedTouches[0]) {
var offsety = canvas.offsetTop || 0;
var offsetx = canvas.offsetLeft || 0;

x = e.changedTouches[0].pageX – offsetx;
y = e.changedTouches[0].pageY – offsety;
else if (e.layerX || 0 == e.layerX) {
x = e.layerX;
y = e.layerY;
else if (e.offsetX || 0 == e.offsetX) {
x = e.offsetX;
y = e.offsetY;
}

return {
x : x, y : y
};
};

function on_mousedown(e) {
console.log(‘H3’);

e.preventDefault();
e.stopPropagation();

canvas.addEventListener(‘mouseup’, on_mouseup, false);
canvas.addEventListener(‘mousemove’, on_mousemove, false);
canvas.addEventListener(‘touchend’, on_mouseup, false);
canvas.addEventListener(‘touchmove’, on_mousemove, false);
document.body.addEventListener(‘mouseup’, on_mouseup, false);
document.body.addEventListener(‘touchend’, on_mouseup, false);

empty = false;
var xy = get_coords(e);
context.beginPath();
pixels.push(‘moveStart’);
context.moveTo(xy.x, xy.y);
pixels.push(xy.x, xy.y);
xyLast = xy;

canvasBlank = false;
};

function on_mousemove(e, finish) {
console.log(‘H4’);

e.preventDefault();
e.stopPropagation();

var xy = get_coords(e);
var xyAdd = {
x : (xyLast.x + xy.x) / 2,
y : (xyLast.y + xy.y) / 2
};

if (calculate) {
var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
pixels.push(xLast, yLast);
else {
calculate = true;
}

context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
pixels.push(xyAdd.x, xyAdd.y);
context.stroke();
context.();
context.beginPath();
context.moveTo(xyAdd.x, xyAdd.y);
xyAddLast = xyAdd;
xyLast = xy;

canvasBlank = false;
};

function on_mouseup(e) {
console.log(‘H5’);

remove_event_listeners();
context.stroke();
pixels.push(‘e’);
calculate = false;

canvasBlank = false;
};
}

canvas.addEventListener(‘touchstart’, on_mousedown, false);
canvas.addEventListener(‘mousedown’, on_mousedown, false);
}

function signatureClear() {
var canvas = document.getElementById(“signature-pad”);
var context = canvas.getContext(“2d”);
context.clearRect(0, 0, canvas.width, canvas.height);
}

function resizeCanvas() {
var ratio = Math.max(window.devicePixelRatio || 1, 1);

canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;

context.scale(ratio, ratio);
}

button actions

document.getElementById(‘clear-button’).addEventListener(‘click’, function () {
signatureClear();
canvasBlank = true;
});

document.getElementById(‘sendData’).addEventListener(‘click’, function () {
base64Canvas = canvas.toDataURL(“image/png”).split(‘;base64,’)[1];
});

document.getElementById(‘goBack’).addEventListener(‘click’, function () {
base64Canvas = canvas.toDataURL(“image/png”).split(‘;base64,’)[1];
});

document.getElementById(‘goForward’).addEventListener(‘click’, function () {
base64Canvas = canvas.toDataURL(“image/png”).split(‘;base64,’)[1];
});

document.getElementById(‘goBack1’).addEventListener(‘click’, function () {
base64Canvas = canvas.toDataURL(“image/png”).split(‘;base64,’)[1];
});

In Html:

Unterschrift

X Unterschrift löschen

I don’t get any error message. All functions are achieved.

Unfortunately, I don’t understand why it doesn’t draw on the canvas.

Do you have any ideas?

Thank you.

Help for a solution