@@satansdeer1 No, what I meant to say is each piece complete code, run it and show what's happened, is cleaner to us. We follow the progress and not surprise on end case fail. Thanks again!
How do I make it erase things? Do I just do the same thing but change the stroke colour to the canvas colour? Or is there a proper canvas API way of doing it?
It will really good and quick project thanks for that but can you improve it maybe you can add an edit tool on images than draw after that tool ,can add delete remove functions :)
Storing, context into an ref is wrong, if you change the canvas later then the context will becomes null. I asked a problem on StackOverflow because of I followed the code you provided :/
well i am a digital artist and i have a dumb question can i build or update the brush response seance i do use wacom tablet . a.k.a the brush to response to the pen pressure. second dumb question will be how can build a brush engine like say clip studio paint or krita for example .
Невероятно полезное видео! Как раз мучаюсь с тем, чтобы сделать что то аналогичное в react native приложении, отсюда у меня 2 вопроса: 1. Будет ли этот код работать там? 2. Как можно считать процент холста, который закрашен?)
so i basically just made it so that the onMove option for the canvas submits a location for every time it activates. Then i put the locations in a son. I can't really seem to get it back from the database without it being just dots or a whole connected mess. But having it as just dots is still pretty good use of the database and i can make a comment section where people draw a picture without using any plugins like canvas to svg.
great video! but why do you need to use the nativeEvent property that is inside react's SyntheticEvent? you can get the correct values also by doing e.clientX without needing to do e.nativeEvent.offsetX the way you did in the video.
Hey Maksim Ivanov, Thank you very much for this App that you've provided. I learned lots of methods from this one. But It threw me an error at context.scale(2,2) line. What do I do to rectify this? Please help me out with this one. Thank you very much once again! Peace!
For canvas.width, canvas.height, canvas.style.width, canvas.style.height, and canvas.getContext("2d") I get a popup in VS Code "Property 'width' does not exist on type 'MutableRefObject'.ts(2339)" warning. In Chrome when running the app I get the error "TypeError: Cannot add property width, object is not extensible." Not using TypeScript. Anyone else run into this?
why do we need contextRef.current.moveTo(offsetX,offsetY) in startDrawing func ? I mean it work well even without it like this const startDrawing = () => { contextRef.current.beginPath() setIsDrawing(true) } Thanks!
If you like this video - retweet this tweet twitter.com/satansdeer/status/1263757427381547008?s=21
Очень приятного видеть русского человека, который снимает видео на английском) Спасибо, Максим
thanks. good programmer, good tutor, good singer
First time coming here. Wonderful video, easy to follow.
Some people would make a video like this but two hours long. thanks a lot.
No prob, I don't have time to make 2hrs videos, lol
Thank you, Saved a lot of my time!
Didn't knew about the context ref thing
8:35 this is exactly where I subscribed to the channel.... la..la..laaa....laa...
are you using expo of react native? cuse mine is not working
Many thanks for the awesome video with good explanation
Well that was easier than I thought it would be... thanks ;)
Interesting idea, great tutorial and perfect explanation. Spasiba very much, Maksim ;)
Amazing Lesson, Thank you so much for sharing
You rock! Thank you. Can you show how to show a camera on canvas, add some text to it and save the image?
Hi Maksim Ivanov , Does React-Native use Canvas in iOS and Android ? or uses the native graphics API ?
Thanks for this. Can you handle how the drawn pictures can be saved or downloaded? Thanks
Woah this was awesome, thanks for the tutorial.
Thanks, how i can programatically, convert a svg to a video animation?
Nice started, thanks. Only one trick: show the progress each code complete to us, then we follow the progress.
Vinicius Martins you mean to break the example code into steps as well?
@@satansdeer1 No, what I meant to say is each piece complete code, run it and show what's happened, is cleaner to us. We follow the progress and not surprise on end case fail. Thanks again!
Why did you double canvas resolution, I think it waste of memory and processing power
Hi sir, can we save as video these canvas drawing in node.js? Any other technique to save it for future replay?
How do I make it erase things? Do I just do the same thing but change the stroke colour to the canvas colour? Or is there a proper canvas API way of doing it?
Thank you, super helpful video!
It will really good and quick project thanks for that but can you improve it maybe you can add an edit tool on images than draw after that tool ,can add delete remove functions :)
perfect. efficient and informative. thanks!
muito obrigado. sua fala é limpa que além de aprender programar melhor em reactjs aprendo o inglês
Great lesson. And fun too! Thank you 👍
Storing, context into an ref is wrong, if you change the canvas later then the context will becomes null. I asked a problem on StackOverflow because of I followed the code you provided :/
well i am a digital artist and i have a dumb question
can i build or update the brush response seance i do use wacom tablet .
a.k.a the brush to response to the pen pressure.
second dumb question will be how can build a brush engine like say clip studio paint or krita for example .
Hm interesting question, now I’m also qurious if browsers support tablet data like angle and pressure
That was awesome!
nyc voice by the way you should be a singer also
nice drawing
Невероятно полезное видео! Как раз мучаюсь с тем, чтобы сделать что то аналогичное в react native приложении, отсюда у меня 2 вопроса:
1. Будет ли этот код работать там?
2. Как можно считать процент холста, который закрашен?)
Cool
Simple and good one.
Great video ! Could you show how to dynamically draw a rectangle on Canvas in React ?
A great video! Thank you so much! Could you please suggest on how to save the drawing to a variable for saving in database?
I believe the dependency react-canvas-draw provides a function for that
Can't wait for the multiplayer feature 🥳
Awesome!! Keep up the good work!
Thank you I learned from you brother.
You are welcome 🙏
This is an awesome tutorial !!!
Which IDE are you using?
Awesome! Thank you.
Thank you. This was really nice.
Really needy this, thanks a lot champ
can you convert this into JSON and store it in either local storage or a database?
joe blogs yes
joe blogs I might record a more complex tutorial later with multiplayer via websockets
@@satansdeer1 THANKYOU
so i basically just made it so that the onMove option for the canvas submits a location for every time it activates. Then i put the locations in a son. I can't really seem to get it back from the database without it being just dots or a whole connected mess.
But having it as just dots is still pretty good use of the database and i can make a comment section where people draw a picture without using any plugins like canvas to svg.
Nice work, nice cat (:
What is the name again of the if-statement with the !isDrawing method you use to prevent an extra indentation?
Guard clause.
thanks for the sources code link. great video
thanks, I try to provide the code for each of my videos
can i make a signature app with ionic and react?
How can an user save(download) the drawing that is present on the screen at a particular time. How to implement this ?
right click and save image
great video learned alot!
thanks man very good video
Epic stuff. Subscribed
very helpful thx 😀
Great ✌️
you are genius
Было бы интересно увидеть, как дополнить этот код для реализации на тачах.
how to draw over a image using reactjs nd canvas
Great thanks would like to see canvas with redux
great video! but why do you need to use the nativeEvent property that is inside react's SyntheticEvent? you can get the correct values also by doing e.clientX without needing to do e.nativeEvent.offsetX the way you did in the video.
Thank you!
Hey Maksim Ivanov, Thank you very much for this App that you've provided. I learned lots of methods from this one. But It threw me an error at context.scale(2,2) line. What do I do to rectify this? Please help me out with this one. Thank you very much once again! Peace!
thank you
О! Вы из англии?
Я по вам, шутникам, отдельный списочек веду
По моему ты русский, судя по акценту))))
preview lol xD
I was inspired by the early impressionists
+1 sub for you sir!
i would like to be explanied more and not using usestate hook , but nice vedio
Hello sir
We need full course of canvas shapes
Would you make sir, we will be very thankful to you
For canvas.width, canvas.height, canvas.style.width, canvas.style.height, and canvas.getContext("2d") I get a popup in VS Code "Property 'width' does not exist on type 'MutableRefObject'.ts(2339)" warning. In Chrome when running the app I get the error "TypeError: Cannot add property width, object is not extensible." Not using TypeScript. Anyone else run into this?
why do we need contextRef.current.moveTo(offsetX,offsetY)
in startDrawing func ?
I mean it work well even without it
like this
const startDrawing = () => {
contextRef.current.beginPath()
setIsDrawing(true)
}
Thanks!
Moreover it work if remove contextRef.current.closePath() from
finishDrawing
I dont understand why it is still work