Canvas: redrawing entire canvas when drawing shapes with mouse causes stutters

I am developing a collaborative whiteboard using the html5 canvas. I want to draw shapes with the mouse, to do so, I am clearing the entire canvas, redrawing the elements previously on the canvas and then adding the new shape on top.

I am using socket.io to send data between clients. On the mouse up event listener for the canvas, I emit data like this:

canvas.addEventListener('mouseup', function () {
canvas.removeEventListener('mousemove', onPaint, false);
canvas.isDrawing = false;
let canvasImg = canvas.toDataURL('image/png')
socket.emit('canvas-data', canvasImg)
}, false);

And then I have a react hook to receive the socket event and set whiteboardImage. It is then painted on to the canvas like this:

useEffect(() => {
if (open) {
let image = new Image();
let canvas = canvasRef.current;
canvas.whiteboardImage = whiteboardImage
let ctx = canvas.getContext('2d');
image.onload = () => {
ctx.drawImage(image, 0, 0)
}
image.src = whiteboardImage
}
}, [whiteboardImage, open])

When drawing shapes, I do so in the mouse move event listener like this:

if (canvas.toolState === 'line') {
if (canvas.isDrawing) {
// clear and get old whiteboard image
ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
let image = new Image();
image.onload = () => {
ctx.drawImage(image, 0, 0)
}
image.src = canvas.whiteboardImage
// draw new line
ctx.beginPath();
ctx.moveTo(mouse.x, mouse.y);
ctx.lineTo(shape_start.x, shape_start.y);
ctx.stroke();
}
} // ... all the other shapes

This problem occurs for all shapes, but not the pencil tool, because I do not have to clear the canvas when drawing with pencil.

As far as I am aware, it is impossible to clear only one stroke. Even if I store everything drawn as an object with its path, I would still have to clear the canvas and redraw, which would still cause a stutter.

Is there anything I can do, how do I make it smooth?

A Minimal, Reproducable Example

const Whiteboard = ({ open }) => {
const canvasRef = useRef(null);
const [whiteboardImage, setWhiteboardImage] = useState(null)
// socket event to receive whiteboard data from other clients
useEffect(() => {
socket.on('canvas-data', (data) => {
let image = new Image();
let canvas = canvasRef.current;
let ctx = canvas.getContext('2d');
image.onload = () => {
ctx.drawImage(image, 0, 0)
}
image.src = data
setWhiteboardImage(data)
})
}, [])
// sets up mouselisteners if the canvas is open
useEffect(() => {
if (open) {
drawOnCanvas()
}
}, [open, canvasRef])
const drawOnCanvas = () => {
let canvas = canvasRef.current;
if (canvas) {
let ctx = canvas.getContext('2d');
let rect = canvas.getBoundingClientRect();
let sketch = document.querySelector('#sketch');
let sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));
// initializing objects
let mouse = { x: 0, y: 0 };
let last_mouse = { x: 0, y: 0 };
let shape_start = { x: 0, y: 0 };
/* Mouse Capturing Work */
canvas.addEventListener('mousemove', function (e) {
mouse.x = e.pageX - rect.x;
mouse.y = e.pageY - rect.y;
}, false);
/* Drawing on Paint App */
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';
canvas.addEventListener('mousedown', function (e) {
shape_start = { x: mouse.x, y: mouse.y }
canvas.isDrawing = true;
canvas.addEventListener('mousemove', onPaint, false);
}, false);
canvas.addEventListener('mouseup', function () {
canvas.removeEventListener('mousemove', onPaint, false);
canvas.isDrawing = false;
let canvasImg = canvas.toDataURL('image/png')
socket.emit('canvas-data', canvasImg)
}, false);
// draws straight line with mouse
let onPaint = function () {
// clear and get old whiteboard image
ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
if (whiteboardImage) {
let image = new Image();
image.onload = () => {
ctx.drawImage(image, 0, 0)
}
image.src = whiteboardImage
}
// draw new line
ctx.beginPath();
ctx.moveTo(mouse.x, mouse.y);
ctx.lineTo(shape_start.x, shape_start.y);
ctx.stroke();
}
}
return (
<div>
<canvas ref={canvasRef} />
</div>
)
}

I tried to make it as minimal as possible. In this example, you can only draw lines, there is no brush tools like in the gifs. The stuttering comes from the way I draw shapes in the onPaint function. It is the clearing and redrawing that is the issue.

You load whiteboardImage every mousemove call - it cause blinking image. You should load it smoothly and use loaded image only in your canvas drawing (do not load it there).

const [image, setImage] = useState(null);
// next line not required anymore
// const [whiteboardImage, setWhiteboardImage] = useState(null)


useEffect(() => {
    socket.on('canvas-data', (data) => {
        let image = new Image();
        let canvas = canvasRef.current;
        let ctx = canvas.getContext('2d');
        image.onload = () => {
             setImage(image);
        }
        image.src = data;
    });
}, []);

useEffect(() => {
    if (open && canvasRef.current) {
        drawOnCanvas()
    }
}, [open, canvasRef, image])

const drawOnCanvas = () => {
    let canvas = canvasRef.current;
    let ctx = canvas.getContext('2d');
    let rect = canvas.getBoundingClientRect();

    ...

    // draws straight line with mouse
    let onPaint = function () {
        // clear and get old whiteboard image
        ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
        if (image) {
            ctx.drawImage(image, 0, 0);
        }
        // draw new line
        ctx.beginPath();
        ctx.moveTo(mouse.x, mouse.y);
        ctx.lineTo(shape_start.x, shape_start.y);
        ctx.stroke();
    }

    onPaint();
}

But as Kaiido suggested it's much better to use not image data for it but points and parameters. It will be something like:

const Whiteboard = ({ open }) => {
const canvasRef = useRef(null);
const [elements, setElements] = useState(null)
// socket event to receive whiteboard data from other clients
useEffect(() => {
socket.on('canvas-data', (data) => {
setElements(data);
// here data should be kind of list of canvas elements
// it could be something like:
// [
//   {type: "line", start: {x: 0, y: 0}, end: {x: 40, y: 10}},
//   {type: "circle", center: {x: 20, y: 20}, r: 7},
//   {type: "polyline", points: [{x: 0, y: 0}, {x: 2, y: 2}, {x: 5, y, 3}, ...]},
// ]
})
}, [])
// sets up mouselisteners if the canvas is open
useEffect(() => {
if (open && canvasRef.current) {
drawOnCanvas()
}
}, [open, canvasRef, elements])
const drawElement = (ctx, elem) => {
switch (elem.type){
case 'line':
ctx.beginPath();
ctx.moveTo(elem.start.x, elem.start.y);
ctx.lineTo(elem.end.x, elem.end.y);
ctx.stroke();
case 'polyline':
// ...
}
};
const drawOnCanvas = () => {
let canvas = canvasRef.current;
if (canvas) {
let ctx = canvas.getContext('2d');
let rect = canvas.getBoundingClientRect();
let sketch = document.querySelector('#sketch');
let sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));
/* Mouse Capturing Work */
const getPos = (e) => {
return {x: e.pageX - rect.x, y: e.pageY - rect.y};
};
/* Drawing on Paint App */
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';
canvas.addEventListener('mousedown', function (e) {
canvas.currentElement = {type: "line", start: getPos(e), end: getPos(e)};
canvas.addEventListener('mousemove', onPaint, false);
}, false);
canvas.addEventListener('mouseup', function () {
canvas.removeEventListener('mousemove', onPaint, false);
elements.push(canvas.currentElement);
socket.emit('canvas-data', elements);
canvas.currentElement = null;
setElements(elements);
}, false);
// draws straight line with mouse
let onPaint = function (e) {
if (e)
canvas.currentElement.end = getPos(e);
// clear and get old whiteboard image
ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
elements.forEach(el => drawElement(ctx, el));
if (e)
drawElement(ctx, canvas.currentElement);
}
onPaint();
}
};
return (
<div>
<canvas ref={canvasRef} />
</div>
);
}

You can see that in this case we just work with objects and we need to implement drawing methods for each type of element (line, circle, etc) and then on mouse event listeners we just changing currentElement object.

This approach is much better cause it doesn't depend on canvas size.

With your approach if someone will draw circle on the right side of screen on mobile (small screen) other people with wider screen will see cropped image. In object oriented approach this problem is eliminated.

Hope it will help.