Hi 🙂 Thanks! It's definitely possible, I have another video later in this series for adding text in general. I guess that could be adopted to act as a label for a rectangle!
Thanks, good question. I believe Canvas offers a bit more flexibility and interactivity as it has a lower level API, however I have not actually tried SVG. For a simple app like this I think SVG could work fine.
Thanks. Yea that sounds about right, in my head my initial approach would be to check cursor position on mouse down and check if it's close enough to a corner, then on move resize. The resize might be a bit awkward as you would need to move the start position and/or the width/height depending on the corner. I am intending to add this functionality in a video soon.
why did you use `useLayoutEffect` hook? doesn't just taking reference of canvas element (using `useRef`) then using `useEffect` hook is better approach?
Hey! Thank you for the series it was helpful, I'm now working on the same project for college and this helped me a lot. I'm currently stuck. Whenever i upload an image and try to edit it (use the pencil to draw on it) the image deletes itself and i have no idea why. I would appreciate your help and thank you
@@RedhwanNacef AdemZg/DrawApp . I was not allowed to send you the whole link . I hope you fix it , also there is an eraser button out there so take a look at it if you can :3 . Again thank you so much
great tutorial! im getting some weird mouse offset when i draw the lines, i have all the width and height parameters the same as in your video, any ideas?
Thanks! Not sure off the top of my head, happy top take a look if you have a repo. Also you can find all the code in the description just to make sure you haven't missed anything.
same here because I am not using canvas for full width and height I use canvas in my particular division which is having some margin. I am also trying to find out the solution
Thanks a lot for doing this series. though I'm having a problem with rough js problem with const generator = rough.generator(); 'TypeError: roughjs__WEBPACK_IMPORTED_MODULE_2___default(...).generator is not a function' what could be the problem?
You're welcome, glad you like it. This is usually an issue with the import, although it's hard for me to guess the issue. Happy to try help if you can share the code on github or something?
@@RedhwanNacef thank you for your reply I found a solution to this problem I used it in next js though I'm not sure if it's the reason I had this problem but I fixed by using the following import 'import rough from "roughjs/bundled/rough.cjs.js"; '
You can do this with a small change using a seed. When creating the line or rectangle (any any shape with roughGenerator), you can randomly generate a seed number and pass it in using the "seed" config option. This will then guarantee the shape shape is always used even on redrawing. You can find docs on seed in roughjs here: github.com/rough-stuff/rough/wiki#seed. You can also see excalidraw setting it here: github.com/excalidraw/excalidraw/blob/2d279cbb02f4303bd4f278651a301064f773f953/src/element/newElement.ts#L72. Hope that helps.
@@RedhwanNacef i mean, that I don't want client to be able to see JavaScript code of the drawing app by clicking on the "show source" button. Especially if 70% of work is done on the frontend.
@@736939 You can't fully hide frontend code, but moving sensitive logic to the backend and using obfuscation helps minimize exposure for example any sensitive processing or logic should be done server-side and accessed via API calls. Use tools to make the JavaScript harder to understand, though it won't completely hide it.
Not sure what you mean by storing as video? If you watch the later videos (particularly the undo/redo video) we store all the history actions in state, that would allow to you replay all actions from nothing up to the existing state. Maybe that would help?
Yea you can do that. You just need to add an image on the context, then you can continue as normal. There are a few examples of adding images here: developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#example_framing_an_image. Hope that helps!
I believe so (well not so much "draw" but convert a drawing to pdf), not sure what the best way is but a starting point may be to convert the canvas to an image data uri using developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL, then maybe using a tool such as parall.ax/products/jspdf to convert to pdf. Hope that helps!
man.. one of the best tutorial on react and canvas
Thank you!
Thanks a lot for doing this series. I've been looking at doing this type of project for a while. Keep it up.
My pleasure, thanks for watching. Glad it was useful.
Really well put together tutorial, thank you very much!
Glad you enjoyed it!
This is exactly what I need, thanks for sharing.
Thanks again, glad it helped.
Simply brilliant, amazing explanation and from tought process to code was easily understandable 👍💯
Excellent rendition...very well elucidated...I found it very useful.
Thanks a lot, glad it was helpful :)
Great. Thanks for uploading these lectures. Rough canvas is awesome too.
My pleasure. Yea, I really like the feel it gives.
This is amazing, thanks for putting it out there
Thanks, glad you like it!
Just what I was looking for. Thank you!
Anytime!
Simple and amazing.. how about the mobile touch support?
Thanks! I will add that to my todo list to look into. Some things might work out of the box but it won't be ideal.
Good stuff, very useful. Keep it up!!
Thanks, glad it helped! Will do.
Great video . really helped me to get start with
also keep doing this .. you deserve a lot more views and subscribers
Thank you so much for the kind words. Really Appreciate it.
Hey! great video. Can we also add labels to the rectangles we draw?
Hi 🙂 Thanks! It's definitely possible, I have another video later in this series for adding text in general. I guess that could be adopted to act as a label for a rectangle!
Very helpful video, thanks a lot:)
Glad it was helpful!
Hi sir. Great video. A question. Why is done with Canvas? it could be done with SVG? it would be better doing it with SVG? thanks.
Thanks, good question. I believe Canvas offers a bit more flexibility and interactivity as it has a lower level API, however I have not actually tried SVG. For a simple app like this I think SVG could work fine.
cool - good job.
How would an edit element will be implemented ?
Select by selection-box and then some grid-boxes to resize the selected element....
Thanks.
Yea that sounds about right, in my head my initial approach would be to check cursor position on mouse down and check if it's close enough to a corner, then on move resize. The resize might be a bit awkward as you would need to move the start position and/or the width/height depending on the corner. I am intending to add this functionality in a video soon.
Great video!. Can I know what is VS code extension you are using? It's very helpful for me as a beginner.
Thanks, I am using IntelliJ instead of VS Code.
super great teaching
Thank you!
It' just superb
Thanks 😊
That was so cool
Thanks 👍🏽
Thanks for this.
Any time
why did you use `useLayoutEffect` hook? doesn't just taking reference of canvas element (using `useRef`) then using `useEffect` hook is better approach?
Hey! Thank you for the series it was helpful, I'm now working on the same project for college and this helped me a lot. I'm currently stuck. Whenever i upload an image and try to edit it (use the pencil to draw on it) the image deletes itself and i have no idea why. I would appreciate your help and thank you
Hello 👋🏼 Glad the videos helped. I am happy to help. Are you able to provide a code sample/GitHub link and I can take a look?
@@RedhwanNacef AdemZg/DrawApp . I was not allowed to send you the whole link . I hope you fix it , also there is an eraser button out there so take a look at it if you can :3 . Again thank you so much
@@RedhwanNacef hey .I'm still having issues with uploading images and editing it. do you have any idea what the problem could be?
Added an issue to the repo with a bit of a description. Let's move the chat there!
great tutorial! im getting some weird mouse offset when i draw the lines, i have all the width and height parameters the same as in your video, any ideas?
Thanks! Not sure off the top of my head, happy top take a look if you have a repo. Also you can find all the code in the description just to make sure you haven't missed anything.
same here because I am not using canvas for full width and height I use canvas in my particular division which is having some margin. I am also trying to find out the solution
Thanks a lot for doing this series. though I'm having a problem with rough js
problem with const generator = rough.generator();
'TypeError: roughjs__WEBPACK_IMPORTED_MODULE_2___default(...).generator is not a function' what could be the problem?
You're welcome, glad you like it. This is usually an issue with the import, although it's hard for me to guess the issue. Happy to try help if you can share the code on github or something?
@@RedhwanNacef thank you for your reply I found a solution to this problem I used it in next js though I'm not sure if it's the reason I had this problem but I fixed by using the following import 'import rough from "roughjs/bundled/rough.cjs.js";
'
@@kthehatter Good work! I think that makes sense, they support different module systems.
@@RedhwanNacef yeah i guess so thank you for your time
Now I'm wondering how excalidraw does the updating of nodes without making it look shakey when drawing a rectangle.
You can do this with a small change using a seed. When creating the line or rectangle (any any shape with roughGenerator), you can randomly generate a seed number and pass it in using the "seed" config option. This will then guarantee the shape shape is always used even on redrawing. You can find docs on seed in roughjs here: github.com/rough-stuff/rough/wiki#seed. You can also see excalidraw setting it here: github.com/excalidraw/excalidraw/blob/2d279cbb02f4303bd4f278651a301064f773f953/src/element/newElement.ts#L72. Hope that helps.
Hey!,
Help me here please,
Can you make this work for touch screen too?
thanks
Hey should i get the whole code of this drawing app
Which vscode extension are you using?
bro that's a different IDE he's using
is that android studio app? what app did you use to code?
OK, but how to hide all Javascript Logic from the frontend to the backend?
Sorry I'm not sure exactly what you mean by hiding the javascript logic in the backend?
@@RedhwanNacef i mean, that I don't want client to be able to see JavaScript code of the drawing app by clicking on the "show source" button. Especially if 70% of work is done on the frontend.
@@736939 You can't fully hide frontend code, but moving sensitive logic to the backend and using obfuscation helps minimize exposure for example any sensitive processing or logic should be done server-side and accessed via API calls. Use tools to make the JavaScript harder to understand, though it won't completely hide it.
Hi sir, can we save as video these canvas drawing in node.js? Any other technique to save it for future replay?
Not sure what you mean by storing as video? If you watch the later videos (particularly the undo/redo video) we store all the history actions in state, that would allow to you replay all actions from nothing up to the existing state. Maybe that would help?
@@RedhwanNacef no sir , like youtube if we go live youtube will save our live stream. How it will happen?
one doubt can we use image as background nd draw over it...nd save it ?? any ideas
Yea you can do that. You just need to add an image on the context, then you can continue as normal. There are a few examples of adding images here: developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#example_framing_an_image. Hope that helps!
@@RedhwanNacef thank you sir.... it really helped me... thank you so much
Great! 👍🏽
is it possible to draw on pdf files
I believe so (well not so much "draw" but convert a drawing to pdf), not sure what the best way is but a starting point may be to convert the canvas to an image data uri using developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL, then maybe using a tool such as parall.ax/products/jspdf to convert to pdf. Hope that helps!
do you have any paid course ?
No I don't, I may create one if I can make time to produce content consistently at some point in the future!