Stop canvas clearing on lineWidth change - reactjs

Question

I have a react app that allows you to draw and select different line widths.
Code:
const [sliderVal, setSliderVal] = useState(1)
const canvasRef = useRef(null)
useEffect(() => {
const canvas = canvasRef.current
const ctx = canvas.getContext('2d')
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
/* Mouse Capturing Work */
var mouse = {x: 0, y: 0};
var last_mouse = {x: 0, y: 0};
canvas.addEventListener('mousemove', function(e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
canvas.style.cursor = "crosshair";
}, false);
/* Drawing on Paint App */
ctx.lineWidth = sliderVal;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'blue';
canvas.addEventListener('mousedown', function() {
canvas.addEventListener('mousemove', onPaint, false);
}, false);
canvas.addEventListener('mouseup', function() {
canvas.removeEventListener('mousemove', onPaint, false);
}, false);
var onPaint = function() {
ctx.beginPath();
ctx.moveTo(last_mouse.x, last_mouse.y);
ctx.lineTo(mouse.x, mouse.y);
ctx.closePath();
ctx.stroke();
};
}, [sliderVal])
I'm trying to make it so if sliderVal changes the whole canvas wont re-render only the line width will. Right now it works but if I select a new lineWidth the whole canvas gets cleared.

Answer 1

I recommend you not to use the eventListener in that way, canvas in ReactJS already has some methods to which you can access and pass a function. This new way of handling the canvas solves your problem:
const [sliderVal, setSliderVal] = useState(1);
const [mouse, setMouse] = useState({
x: 0,
y: 0,
lastX: 0,
lastY: 0,
click: false
});
const canvasRef = useRef(null);
const paint = (e) => {
const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
const bounds = canvas.getBoundingClientRect();
setMouse({
...mouse,
x: e.pageX - bounds.left - window.scrollX,
y: e.pageY - bounds.top - window.scrollY,
lastX: mouse.x,
lastY: mouse.y
});
ctx.lineWidth = sliderVal;
ctx.lineJoin = "round";
ctx.lineCap = "round";
ctx.strokeStyle = "blue";
if (mouse.click) {
ctx.beginPath();
ctx.moveTo(mouse.lastX, mouse.lastY);
ctx.lineTo(mouse.x, mouse.y);
ctx.closePath();
ctx.stroke();
}
};
useEffect(() => {
const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
canvas.style.cursor = "crosshair";
}, []);
return (
<canvas
onMouseDown={() => setMouse({ ...mouse, click: true })}
onMouseMove={(e) => paint(e)}
onMouseUp={() => setMouse({ ...mouse, click: false })}
ref={canvasRef}
/>
I share a codesandbox with the functional solution