I am creating a persistant whiteboard app using HTML and JS, where the user draw on the canvas on the cnavas, clicks save, storing the canvas image data to a mysql db. When the page reloads, the canvas should fetch the stored image data from the db and redraw this on the canvas, creating a persistant whiteboard.
The fetch functions are working fine and the image data is correctly retrieved and stored in a data structure, however when I reload the page the image is not drawn back on the canvas. Specifically, when I use
imageData.data.set(latestDrawing)
the length of imageData does not match the length of latestDrawing as expected, which I think is the cause of the issue; does anyone know about creating new image data with pre-existing data?
the save and redraw function in WhiteBoard.js:
window.addEventListener('load', () => {
resize();
redraw();
window.addEventListener('click', handleOutsideClick);
document.addEventListener("mousedown", startdrawing);
document.addEventListener("mousemove", sketch);
document.addEventListener("mouseup", stopdrawing);
document.addEventListener("mouseout", stopdrawing);
window.addEventListener('resize', resize);
});
async function saveState() {
// console.log("before save")
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
await fetch('/WhiteBoard', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ type: 'canvasState', data: imageData }),
});
console.log("saved")
}
async function redraw() {
try {
const response = await fetch('/WhiteBoard');
var latestDrawing = await response.json();
if (latestDrawing) {
//get db data into readable image data form
latestDrawing = JSON.parse(latestDrawing.data);
//create a new blank image data
var imageData = ctx.createImageData(canvas.width, canvas.height);
imageData.data.set(latestDrawing);
ctx.putImageData(imageData, 0, 0);
}
} catch (error) {
console.error('Error:', error);
}
}
the fetch function in Server.js:
app.get('/WhiteBoard', (req,res) => {
// Set the content type to JSON
res.setHeader('Content-Type', 'application/json');
// Your existing query and response logic
db.query('SELECT * FROM canvas_state ORDER BY id DESC LIMIT 1', (error, results) => {
if (error) {
console.error(error);
res.status(500).send('Internal Server Error');
} else {
res.json(results[0]);
}
});
});
I have tried creating a new Uint8ClampedArray, as I read another article that suggested doing this, however the canvas still did not redraw the saved images
const dataArray = new Uint8ClampedArray(drawingData);
