Up next in 10
Build a React.js Canvas Drawing App to Export to Image Using react-canvas-paint in JSX
Jun 3, 2025
Get the full source code of application here:
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys uh welcome to this video
0:02
so in this video I will show you a
0:04
ReactJS uh library which is a canvas uh
0:09
drawing app library kind of uh you can
0:12
actually have a canvas right here uh
0:14
where you can actually draw something
0:15
onto the canvas you can see we also have
0:19
various colors to choose from you can
0:21
change the color here to any color of
0:24
your choice and the nice thing about
0:26
this library is that it is very easy to
0:28
implement you can also export this
0:31
canvas to a PNG image file as soon as
0:34
you click this button you will see all
0:36
your drawing has been saved in a PNG
0:39
file so it specifically works with the
0:42
ReactJS application so there is a
0:44
package
0:46
here if you go to npmjs.com
0:49
uh just search for this package
0:52
uh react
0:54
canvas paint
0:57
so this is actually a react drawing
1:00
library the command is very simple
1:02
simply execute this command to install
1:04
this package and it's a fairly new
1:06
package and now to get started here I
1:09
will simply make a simple functional
1:11
component and first of all we will
1:13
require this package using the import
1:15
statement so import
1:18
react
1:21
canvas paint which will be coming from
1:24
this package react canvas paint and we
1:27
also need to import the CSS file of this
1:29
package as well react canvas paint test
1:33
index dot CSS so in this easy way using
1:36
these two import statements you first of
1:38
all import this package and now to use
1:40
this package first of all we need to
1:42
declare some state
1:44
variables so right here we declare some
1:46
state variables first of all for image
1:50
data for storing the data of the image
1:53
we will use this use state variable
1:57
which will be initially be null secondly
2:00
we'll be declaring a canvas reference
2:02
variable for this we'll be using the
2:04
user ref hook initial value will again
2:07
be null so we have just declared these
2:08
two variables first of all for storing
2:10
the data of the image and secondly we
2:13
have stored a reference so these are the
2:16
two variables that we declared for the
2:18
application now coming back to the JSX
2:24
we need to align everything in the
2:26
center position so here you will text
2:28
align to center and you will just give
2:31
it a margin top of 20 pixel and inside
2:36
this we will actually have a
2:39
react drawing app and here we will
2:43
actually allow the
2:45
user to draw something in the canvas so
2:48
here we will be attaching this canvas
2:50
reference variable that we declared
2:52
right here so we are directly attaching
2:54
it to this div element and right here we
2:57
will be using this component which is
3:00
the react canvas paint
3:04
component as you can see we are
3:06
importing this package right here at the
3:08
top and now we are using this package
3:10
component so this takes some properties
3:13
here so here you can control the width
3:16
let's suppose the width of the canvas is
3:19
uh 500 the height is also 500 and it
3:23
also has some call back function so
3:26
whenever you draw something on the
3:28
canvas this call back function will
3:30
execute so here we are binding it this
3:32
handle draw function so and now we just
3:35
need to define this function so whenever
3:38
we draw something onto the canvas this
3:40
function will execute holding the data
3:43
so right here we will set image data to
3:47
the actual data which is coming so right
3:49
here we are using this function of the
3:52
hook
3:55
so it also takes uh colors here you can
4:00
basically give choices to the user to
4:04
choose from different colors so here we
4:07
can provide hexadimal code here for each
4:09
color right here and then we can even
4:13
provide stroke width so let's suppose I
4:16
hardcode this value to five
4:18
so if you refresh your application guys
4:21
so now what you will see you will see a
4:23
canvas right here 500 by 500 and then we
4:27
have a set of colors to choose from so
4:30
the user can click any individual color
4:32
and the color will change and now we can
4:34
actually add a button so that we can
4:37
export this canvas to a actual image
4:40
file so we can actually add a button
4:43
right here at the bottom side export to
4:46
PNG so once we click this button we will
4:48
execute this function export to PNG so
4:52
now this canvas will be exported to
4:54
image file so for doing this we can
4:56
actually add a function right
5:00
here so right in this function we are
5:02
actually taking the reference of the
5:04
canvas by query selector and then we are
5:07
converting this to base 64 URL this
5:11
function and downloading the image as an
5:14
attachment so now what happens if you
5:16
draw anything in the
5:18
canvas now click the button you will see
5:20
your image will be downloaded this is
5:22
your actual PNG image so you can use
5:25
this package guys in ReactJS which is a
5:28
canvas drawing app can export your
5:30
canvas to a image file as well so very
5:33
good package very easy to get started so
5:36
thank you very much for watching this
5:37
video and also check out my website
5:39
freemediattools.com
5:41
uh which contains thousands of tools
5:44
regarding audio video and image
#Painting