JavaScript to show canvas for signature

What I try to do:
Have a column being a button and running a JS on button click, which provides a simple canvas and a send button, so to sign via mouse or finger, if on touch screen device. Then the resulting base64 data URL should be stored to the column i have for it.

This way, I want to be able to provide users to sign handwritten and have the signature stored o their entry.

Unfortunately, my script wont run, or better it does run but also does nothing. Where am I wrong?

var canvas = document.createElement(“canvas”);

canvas.width = 500;
canvas.height = 500;


var ctx = canvas.getContext(“2d”);

//set background color

ctx.fillStyle = “grey”;

ctx.fillRect(0, 0, canvas.width, canvas.height);

var isMouseDown = false;

canvas.addEventListener(“mousedown”, startDrawing);

canvas.addEventListener(“mousemove”, draw);

canvas.addEventListener(“mouseup”, stopDrawing);

canvas.addEventListener(“touchstart”, startDrawing);

canvas.addEventListener(“touchmove”, draw);

canvas.addEventListener(“touchend”, stopDrawing);

function startDrawing(e) {

isMouseDown = true;


ctx.moveTo(getX(e), getY(e));


function draw(e) {

if (!isMouseDown) return;

ctx.lineTo(getX(e), getY(e));



function stopDrawing() {

isMouseDown = false;


function getX(e) {

if (e.changedTouches) {

return e.changedTouches[0].clientX - canvas.offsetLeft;

} else {

return e.clientX - canvas.offsetLeft;



function getY(e) {

if (e.changedTouches) {

return e.changedTouches[0].clientY - canvas.offsetTop;

} else {

return e.clientY - canvas.offsetTop;



var sendBtn = document.createElement(“button”);

sendBtn.innerHTML = “Send”;


sendBtn.addEventListener(“click”, function() {

var dataURL = canvas.toDataURL();

// do something with dataURL here
// just for testing, later we write the url into a column

Hi @Gerald.

This is very complicated to anayze I think.
Have you tried to put output-lines from the beginning? This could be one way to find the last line that worked.
Have you already tried to analyze the developer tools of the browser? You could wrap the code you think might not work properly into a try catch block.

Ohhhhh It appends the components below the table, so you wont see them, until you scroll down.
Ok, so I found the canvas but my draw function does not work…

Alright, here we go: If I test the script in a normal html page locally on my computer, it works
Screenshot 2023-01-12 at 08-21-40 Screenshot

If I let it run in seatables though, I cant write on the canvas. It just does not register the mouse events.

I think it has to do with the style of the canvas element because it relates to the existing elements on the website. You could try to modify the css style of the canvas (CSS position absolute | How does position absolute work in CSS?).

unfortunately, that had no effect

I fixed the issue, by appending the canvas to the “main” div. This way it worked. Would be even greater, if each row/column div automatically would have its column name + row number as ID. So you could add such things directly into a column in a form … but yeah, appending it below table is also ok for now

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.