I've just submitted this app for Hashnode Christmas hackathon so I wanted to talk about it here in more detail.
I didn't have a chance to work wit...
For further actions, you may consider blocking this person and/or reporting abuse
Thank you!
can you please explain this line from source code?
Sure. I'm replacing the custor with an dynamic background-image svg that is a circle with a certain radius.
got it. thanks.
I've had to do a similar project during my studies, which made me notice something I struggled fixing when I coded it : when you resize the window, the cursor no longer paints where you click but a few (or several) pixels away.
It's up to you to try and fix that if you want, but good job anyway :)
yes if your canvas is not clipped to the border top and border left, you must to use something as this :
to compute where is your point on the canvas and this point with the border, and on a android tablet i use this :
x = Math.floor( event.touches[0].clientX - Id("canvasToDraw").getBoundingClientRect().left );
y = Math.floor( event.touches[0].clientY + scrolledY - Id("canvasToDraw").getBoundingClientRect().top );
and you must manage the scroll, so the scroll is at 0 with variable scrollY.
make a real software is fun, but that can become a real headache sometime...
My work and my paint app of nears 10 thousand of lines of code in js/html5/css : essaie.fr/
But me I use the fact that html can create a matrix of pixels, to work pixels by pixels, and I created a system at a moment where if you click on a canvas you create a matrix of pixels to be used on another matrix of pixels to making your own brush, but it's slower that your solution, my app is in black and white to be used with a eink screens/ereader, and I tried to implements all of tools than an artist can image, and finished by to try to reinvent the wheel. I search few scripts in C to translate in JS to implements more features as an antialiasing post filter, but it's difficult to find documentation to do something beyond the documentation as MDN documentation and others tutorials on the web.
Wow, that is impressive! I don't think JS can handle advanced transforms like antialiasing, but keep working on it. It is very sophisticated!
My app is a bit simpler since it's done for a hackathon in a few days, but I could also add more functionalities later down the line.
Nice! Adding configurable boundaries for the oscillating color/size of the magic brush would increase the possibilities a lot! A color change is very useful, but if it always goes through the whole rainbow spectrum, you'll always have a kids room's wall painting in the end ;)
Tidy - it looks like you might have fun with ZIM - it is a canvas framework with components built in at zimjs.com - there is a Gen Art section on the front that has results of various drawing works including from zimjs.com/genpen. You may also want to apply damping to your motion to make the drawing smoother. You can see that at work at zimjs.com/angels - there is a book of Angels there but also a link to the tool on the first page at left. Cheers!
Very Nice
Amazing! Great job! 👌
Amazing, conngrats
Beautiful!
Nice, it reminds me a plain javascript version I see some time ago :)
youtube.com/watch?v=8ZGAzJ0drl0
Amazing!
This is Amazing, the level of creativity is top notch!❤️❤️
Ah, this is super cool!!! Beautiful work!
amazing i like....
Looks like you have an issue with cursor offset :)
If you look closely difference between cursor and where it's actually painting increases when you are in right bottom corner
Nice. I love it.
Great job! Truly inspiring!
Thank you! Glad you like it
awesome
find some interesting CSS Animation
Wow this is really cool!! I've tried in mobile just for curious and it didn't work (mozilla firefox on iphone) have you addressed this issue and know how to fix it?
I didn't really test it on mobile. It was a quick hackathon project. I might address it in the future.
Can i use on a picture and save it?