Draw on canvas with mousemove and touchmove in React - css

Question

I am rebuilding this Codepen into React Typescript. I think I am pretty close.
However I am not sure about the event type? For now I added any.
And I get the error Property 'getContext' does not exist on type 'HTMLElement'. I read that it occurs when I try to call the getContext() method on an element that has a type of HTMLElement.
Thats correct in my case. To solve the error, I should use a type assertion to type the element as HTMLCanvasElement before calling getContext. But when I do, it throws an error that the canvas type isnt correct.
Also is the document.removeEventListener and document.addEventListener with touchmove/mousemove a good solution or is there a better alternative in React? I use both so its possible to draw on touchscreens too.
import React from "react";
const styles = {
canvas: {
width: "100vw",
height: "100vh",
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>✍️</text></svg>") 5 25, auto,
}
}
export interface Props {
canvas: HTMLElement;
event: any;
}
function App(props: Props) {
const canvas = document.getElementById("canvas");
const context = props.canvas.getContext("2d");
let coord = { x: 0, y: 0 };
const resize = () => {
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;
};
const reposition = (props.event) => {
coord.x = props.event.clientX - props.canvas.offsetLeft;
coord.y = props.event.clientY - props.canvas.offsetTop;
};
const start = (event) => {
document.addEventListener("mousemove", draw);
document.addEventListener("touchmove", draw);
reposition(event);
};
const stop = () => {
document.removeEventListener("mousemove", draw);
document.removeEventListener("touchmove", draw);
};
document.addEventListener("mousedown", start);
document.addEventListener("mouseup", stop);
window.addEventListener("resize", resize);
document.addEventListener("touchstart", start);
document.addEventListener("touchend", stop);
resize();
const draw = (event) => {
context.beginPath();
context.lineWidth = 5;
context.lineCap = "round";
context.strokeStyle = "#ACD3ED";
context.moveTo(coord.x, coord.y);
reposition(event);
context.lineTo(coord.x, coord.y);
context.stroke();
};
return <canvas style={styles.canvas}></canvas>;
}
export default App;

Answer 1

There are a number of things that aren't quite right here. The biggest issue seems to be a confusion between what your variables are and where they come from.
Your App component takes a canvas and an event as props, but it also declares a canvas variable locally, and calls event listeners with the event that triggered them rather than the event from props.
The secondary issue is that you need to be using React hooks. Registering and de-registering event listeners is a side-effect which should be done in a useEffect. If you need to modify a top-level variable like coord then it should be in a useState hook. The best way to access the canvas element is via a useRef hook.
The TypeScript issues are a more minor concern, and they're mainly a consequence of the larger variable and structure issues.
Here's all the things that I changed:
Wrapped the entire cursor text in backticks to make it a string.
Deleted Props as your component doesn't need them.
Created a canvasRef and attached it to the <canvas> element. The type of canvasRef.current is HTMLCanvasElement (or null).
Accessed the canvas and context from this ref, avoiding "is possibly null" issues with the optional chaining operator ?. and if statements.
Typed your event arguments as (event: MouseEvent). Note that since these events are from a JavaScript event listener they will be DOM events rather than React synthetic events (React.MouseEvent, etc.).
Removed the touch event handling, for now at least, because touch events do not have a clientX property so you need an alternative way to handle these. (This is the sort of issue that TypeScript is great at finding!).
Moved all top-level function calls into a useEffect hook, with a cleanup function (this is a best practice but is not strictly needed if this component is your entire app).
Add this point the code works! Woo hoo! Here is where we are at with those changes:
import React, { useEffect, useRef } from "react";
const styles = {
canvas: {
width: "100vw",
height: "100vh",
cursor: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>✍️</text></svg>") 5 25,auto`
}
};
function App() {
const canvasRef = useRef<HTMLCanvasElement>(null);
const canvas = canvasRef.current;
const context = canvas?.getContext("2d");
let coord = { x: 0, y: 0 };
const resize = () => {
if (canvas) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
};
const reposition = (event: MouseEvent) => {
if (canvas) {
coord.x = event.clientX - canvas.offsetLeft;
coord.y = event.clientY - canvas.offsetTop;
}
};
const draw = (event: MouseEvent) => {
if (context) {
context.beginPath();
context.lineWidth = 5;
context.lineCap = "round";
context.strokeStyle = "#ACD3ED";
context.moveTo(coord.x, coord.y);
reposition(event);
context.lineTo(coord.x, coord.y);
context.stroke();
}
};
const start = (event: MouseEvent) => {
document.addEventListener("mousemove", draw);
reposition(event);
};
const stop = () => {
document.removeEventListener("mousemove", draw);
};
useEffect(
() => {
// call resize() once.
resize();
// attach event listeners.
window.addEventListener("resize", resize);
document.addEventListener("mousedown", start);
document.addEventListener("mouseup", stop);
// remove listeners on unmount.
return () => {
window.removeEventListener("resize", resize);
document.removeEventListener("mousedown", start);
document.removeEventListener("mouseup", stop);
};
},
[] // no dependencies means that it will be called once on mount.
);
return <canvas style={styles.canvas} ref={canvasRef} />;
}
export default App;
But we are still violating some principles of React by mutating this coord variable. So I thought about it a bit more and wondered if we could just return the x and y from a utility function rather than dealing with another state or ref. This draw function would not play nicely with React state because it uses the value before and after updating the coord variable and React setState calls are asynchronous.
I realized that it's really not necessary to beginPath() on every mouse movement. That is something which can be handled in start. Moving it there makes it so that draw only needs to know the current position and not the previous position.
Here's how that looks:
import React, { useEffect, useRef } from "react";
const styles = {
canvas: {
width: "100vw",
height: "100vh",
cursor: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>✍️</text></svg>") 5 25,auto`
}
};
function App() {
const canvasRef = useRef<HTMLCanvasElement>(null);
const canvas = canvasRef.current;
const context = canvas?.getContext("2d");
const resize = () => {
if (canvas) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
};
const getCoord = (event: MouseEvent) => {
if (canvas) {
return {
x: event.clientX - canvas.offsetLeft,
y: event.clientY - canvas.offsetTop
};
} else {
return { x: 0, y: 0 };
}
};
const draw = (event: MouseEvent) => {
// extend the stroke to the current position.
if (context) {
const coord = getCoord(event);
context.lineTo(coord.x, coord.y);
context.stroke();
}
};
const start = (event: MouseEvent) => {
// begin path.
if (context) {
const coord = getCoord(event);
context.beginPath();
context.lineWidth = 5;
context.lineCap = "round";
context.strokeStyle = "#ACD3ED";
context.moveTo(coord.x, coord.y);
}
// listen for movements.
document.addEventListener("mousemove", draw);
};
const stop = () => {
// stop listening for movements.
document.removeEventListener("mousemove", draw);
};
useEffect(
() => {
// call resize() once.
resize();
// attach event listeners.
window.addEventListener("resize", resize);
document.addEventListener("mousedown", start);
document.addEventListener("mouseup", stop);
// remove listeners on unmount.
return () => {
window.removeEventListener("resize", resize);
document.removeEventListener("mousedown", start);
document.removeEventListener("mouseup", stop);
};
},
[] // no dependencies means that it will be called once on mount.
);
return <canvas style={styles.canvas} ref={canvasRef} />;
}
export default App;
Also is the document.removeEventListener and document.addEventListener with touchmove/mousemove a good solution or is there a better alternative in React? I use both so its possible to draw on touchscreens too.
There are some advantages to the document event approach, especially when it comes to touches that start off of the canvas and end on the canvas, or vice-versa. But your intention is for the canvas to be the entire screen so I'm not sure how relevant that is.
An alternative approach would be to use the onMouseDown, onMouseMove etc. properties of the React <canvas> element. This will attach the listeners directly to the canvas rather than to the document. The event variable in your handlers will be a React synthetic event. The event target will be the canvas which makes it easier to get the relative position of the event.
I'm defining the handlers inline so that the e variable automatically gets the correct type, which is React.MouseEvent<HTMLCanvasElement, MouseEvent>.
import React, { useEffect, useRef, useState } from "react";
const styles = {
canvas: {
cursor: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>✍️</text></svg>") 5 25,auto`
}
};
function App() {
const [isDrawing, setIsDrawing] = useState(false);
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(
() => {
// define the resize function, which uses the re
const resize = () => {
const canvas = canvasRef.current;
if (canvas) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
};
// call resize() once.
resize();
// attach event listeners.
window.addEventListener("resize", resize);
// remove listeners on unmount.
return () => {
window.removeEventListener("resize", resize);
};
},
[] // no dependencies means that it will be called once on mount.
);
return (
<canvas
style={styles.canvas}
ref={canvasRef}
onMouseDown={(e) => {
// know that we are drawing, for future mouse movements.
setIsDrawing(true);
const context = e.currentTarget.getContext("2d");
// begin path.
if (context) {
context.beginPath();
context.lineWidth = 5;
context.lineCap = "round";
context.strokeStyle = "#ACD3ED";
context.moveTo(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
}
}}
onMouseMove={(e) => {
// only handle mouse moves when the mouse is already down.
if (isDrawing) {
const context = e.currentTarget.getContext("2d");
if (context) {
context.lineTo(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
context.stroke();
}
}
}}
onMouseUp={() => {
// end drawing.
setIsDrawing(false);
}}
/>
);
}
export default App;
CodeSandbox Link