How to Build a Canvas Painting App with Ionic 4

In this tutorial we will work with a Canvas inside our Ionic 4 app to draw onto images and export the canvas to a real image!

The training platform for everything Ionic. 40+ Ionic Courses, Ionic tutorials and private community to help you learn Ionic fast.

#############################

#############################

You can also find me...

#############################

[mahmoudmortada]

Simon, thanks for this tutorial . Really I spent days searching for ionic canvas painting tutorial, and I was waiting for your, you made my day

[AlejandroMartinez-rjty]

Simon, I was waiting for this tutorial. Thanks so much for this update to Ionic 4, It's amazing!

[bhushanpardhi]

Hi Simon, I have followed your instructions and made app as you made but it works properly for browser but when I create build and run it on mobile and whatever I draw it doesn't show on mobile

[HackHeyner]

That's one of the amazinest things I've ever seen :D :D :D
Thx Simon!!!!

[muhammadzubair]

this is not drawing on mobile devices. this is working perfect on web browsers but not on mobile devices.

[marcelocch]

Amazing job Profe!
Thanks you so much for your videos!!!! .





"Profe" its something, we latinamerican people say often to our best teachers. It just means Teacher in spanish :).

[deasytech]

hi Simon, thanks for this wonderful tutorial. A quick question, how can I move an image around in the canvas. A quick guide please.

[ricardocastillo]

Hi, good video simen it works but do you know why on a mobile device the canvas gets slow if you want to write a name?, The same thing happens to you and if not, how did you solve it?

[adel_dx]

Simon, thanks for this nice tutorial. any tutorial about crop image via finger?

[truecotz]

Thank you very much, it helped me a lot ^^

[Ayyoub-]

For mobile devices ev.pageX and ev.pageY are undefined, something like this should work let pageX = ev.pageX? ev.pageX : ev.touches[0].pageX;

[carlosgaleanohn]

Thanks again...! I did something similar using only javascript :) but TY bro

[eldelotrodia]

I need help
On Ionic 5, there's no touch functions (touchestart, touchend, touchmove)

[laxusmorilla]

Hi Simon, Thanks for every tutorial video you upload, ...I just want to ask if its possible to access or get data from mssql database using ionic?Please help..Thank You..

[hannatawk]

hey Simon can we add a undo redo functions ? if yes how can i implement them ?

[rupeshyadav]

Can you please make one video on html2canvas on ionic4?
I'm getting this error every time I'm using html2canvas.
"Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed"

[AlejandroMartinez-rjty]

Hi Simmon. Is there a way to get the saved image path within the function exportCanvasImage() so that I can use that path in the Email Composer in order to add the image as Attachment? I know there is other Tutorial were you show in Ionic 3 how to attach images in the composer, but it will be nicer if we can set up the attachmennt directly without to force the user to search the just saved image again in the Device Galery, don't you think? Again, thanks a lot for this great Tutorial I hope you can help me with the Image Path, I was searching in base64ToGallery how to get the path but I was not successful.

[Paranoia-vs]

Hi Simon, why doesn't work in mobile? not drawing :(

[snvidsu]

Not working properly on ipad....touch on one side and draw on other side

[Paranoia-vs]

It doesn't work for me on a physical device, what can happen?