Adding Zoom Tool To HTML Canvas | Drawing App Tutorial Part 8

Hey! Now that we have added the Pan tool, the Zoom too will be a bit easier to add as it follows the same principals. Let's do that next, hope you enjoy :)
Useful Links:
GitHub: github.com/redhwannacef/youtu...
Drawing App Series: • Build a Drawing App wi...
MDN Docs Scale: developer.mozilla.org/en-US/d...
Music:
• Akita Inu
Huge thank you to Harris Heller for providing copyright-free music.
Hey everyone! My name is Redhwan Nacef (Red for short). In this channel, I'm hoping to share my thoughts on software engineering, coding, management, and all things tech. I hope you enjoy!

[@vinodhvarma6075]

Very informative tutorial, please continue this series

[@deepakchoudhary3370]

Hey, Bro, it's really amazing learning from your playlist. Thank you, Redhwan.
It will be additional learning if you make a video on how to save details of the canvas in the database.

[@leandro-siqueira]

I have tried doing this at my canvas once and you videos helped a loot, but a coud't do it by myself. Now i can finish the project 😅, so thanks again!! Sorry about my english, i am still working on it, but a van tell that you explain so well that i can understand everything without legends!

[@RedhwanNacef]

Glad to hear this helped. Keep going! 💪🏽

[@jijivre]

Hey this series helped me a lot. Your videos are great value!
Do you know how you could connect shapes together with lines or arrows that move along with the shape, like in excalidraw?

[@joshgriffiths8467]

Hey mate, fantastic video. really learnt a lot from this playlist. Is it possible for the zoom to keep the mouse in the same relative position, rather than zooming into the center of the screen? e.g. if the mouse is on the corner of a rectangle, as you zoom, the mouse stays on that point? Been stuck trying to work this out for days

[@NattyEngineer]

Hey Redhwan huge thanks to u for this drawing app series,appreciate your effort making this tutorial but i want to modify the excali draw in terms of erasing as it erase the entire content not the drawing content i want to erase please reply if there is any way of working out

[@tobiaskathan134]

Very nice series. How could I implement it instead of an infinite whiteboard with typical sheet sizes (e.g. A4)? (kind of a very simple Goodnotes clone)

[@haiduy5141]

How can I have a scrollbar whenever I zoomed in the rect inside a frame. Btw your videos is awesome, love to see latest video

[@francovedia5584]

thanks

[@vickrammark2082]

awesome 🔥🔥🔥🔥🔥🔥🔥🔥

[@RedhwanNacef]

Thanks 🔥

[@yonjaydo2435]

Your github not update! I cannot find Part 8

[@user-lz2wf5dz2f]

One thing I've noticed about HTML canvas is that when zooming the resolution quickly looks really bad. What do you think is the best way to fix that?

[@winningless]

Can you show us how to implement a delete button that deletes a specific element and updates the elements array when you click it?

[@RedhwanNacef]

Yep, noted!

[@winningless]

@@RedhwanNacef
Thanks.
I came up with this and it seems to work. I thought I would have to update the Actions array as well for undo and redo but it seems to function fine.
I filtered the deleted element and then updated the id of each element to remain to keep them the same as their index in the Elements array:
In handleMouseDown function:
if (tool === 'delete') {
const { offsetX: x, offsetY: y } = e.nativeEvent;
const elementToDelete = getElementAtPosition(x, y, elements);
if (elementToDelete) {
const elementsCopy = [...elements];
const updatedElements = elementsCopy
.filter((element) => element.id !== elementToDelete.id)
.map((element, index) => {
return { ...element, id: index };
});
setElements(updatedElements);
}
return;

[@thomaswoodward9514]

P r o m o S M 🌹

[@RedhwanNacef]

...