How to Handle Canvas API Events in React
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:13] Handling canvas events. We want to handle the following situations. The user pressed the mouse button, the user moved the mouse, user released the mouse button, and the cursor left the canvas area.
[00:14 - 00:29] Inside of the app component, define the handlers for those events. Const start drawing, it will handle the mouse press draw, it will happen on mouse move and and drawing.
[00:30 - 00:36] It will happen on mouse app and mouse out. Add those event handlers to their canvas.
[00:37 - 00:52] On mouse down, we start drawing, on mouse up, we end drawing, same as on mouse out, and on mouse move, we call that draw method. Now we handle every press move or release of the mouse that happens above the canvas element.