Recognized by Clutch.co as a top-rated Mobile App Development Company.
folio3-mobile
US 408 365 4638
START YOUR PROJECT
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us

How to make use of HTML5 Canvas with React

Published by: Noc Folio3 | August 26, 2019
SCROLL AND BE AMAZED!
Home > Blog > How to make use of HTML5 Canvas with React

In this blog, we are going to learn how can we draw an image and write text on HTML5 canvas element using React.

Wait! What is Canvas?

It’s an HTML element that is used to draw graphics on a web page. The element is only a container for the graphics; we use JavaScript to actually “draw” the graphics onto the canvas.

Basic setup!!!

We’ll start by creating a new React app using create-react-app. Just create a new folder and open your terminal there and type following commands

> npx create-react-app canvas-on-react
> cd canvas-on-react
> npm start

Your browser should open http://localhost:3000/ and you should see a spinning React logo. You’re now ready to go!

Let’s get started:

Open the file src/App.js in your favorite editor and replace the contents with the following code:

Here, I have imported and rendered my custom Canvas component which I will show you later.

I am passing some props to my Canvas component

– imageToShow: This will be the image you want to draw inside canvas

– textToShow: Text which you want to show inside that image

– width: width of canvas

– height: height of canvas

The Canvas Component:

There are two main elements inside this component, the image element, and the canvas element.

Both elements have a ref attribute. This is how we’ll access the elements later on. (If we were using plain JavaScript, we could do something like document.getElementById(“canvas”). Since we’re using React, we need another way to access the elements.)

We want to draw the image on canvas on mounting phase. For that purpose, we are going to use REACT lifecycle hook “ComponentDidMount”.

You need to insert the following line of code inside ComponentDidMount lifecycle and you are good to go.

Let’s walk through those new lines of code:

First, find the <canvas> element and save it to a variable.

                 const canvas = this.refs.canvas

Create a drawing object for our canvas and save it to a variable. This drawing object is what we’ll actually be drawing on.

                  const ctx = canvas.getContext(“2d”)

Find the <img> element and save it to a variable.

                  const img = this.refs.img

After saving the reference of all the elements, its time to draw our canvas.

Firstly, use image onload event to wait and start drawing after the <img> element has finished loading.

                 img.onload = () => {…}

Then use the drawImage(image,x,y) method to draw our image starting at the top left corner of the canvas. The drawImage takes 3 parameters.

1. Image to draw

2. X-axis position

3. Y-axis position

                ctx.drawImage(img, 0, 0)

This will draw the image on the canvas. Now its time to insert some text into it.

Setting the font properties for the text we are about to draw using the font method.

                ctx.font = “40px Courier”

Lastly fill the text by ,

                 ctx.fillText(this.props.text, 10, 180)

Here we are using the fillText(text,x,y) method to draw our text. (As you can see, we’re getting our text from the props that were passed down from the parent component. In this example, this.props.text is “An untold story”).

Final Result:

You can see you now have one “single graphic element” on your web page. All you need is just to use this canvas component anywhere!!

If you want to save this canvas on some server , you can turn it into a dataURL by this single line of code

         const dataURL = canvas.toDataURL()

The result is a 64 bit encoded PNG URL which you save on any server. When you want to display the image on a web page, the string becomes the src of your <img> element.

For example, let’s say we just retrieved this long data URL string from a database or wherever and saved it in a variable called image. The JSX to display the image would be:

                <img src={image} />

Wrapping Up:

You can do many things using the HTML5 canvas element. I made this blog so that you have an idea that how we can use it and integrate it into any REACT application.


About Noc Folio3

Newsletter

Search

Archives

  • December 2023
  • April 2023
  • March 2023
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • October 2021
  • September 2021
  • May 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • May 2019

Recent Posts

  • Exploring Flutter Navigation: From Basics to Advanced Routes
  • Web UI Test Automation with Pytest-BDD
  • How to fix IOS compass calibration issues
  • Testing Android Applications With Perfect Coverage
  • How to use useRef hook efficiently? – React

Tags

  • android
  • angular-state-management
  • Automation
  • Compass
  • cross-platform
  • css
  • development
  • firebase
  • hooks
  • ios
  • learn-ngrx
  • ngrx-beginner
  • ngrx/store
  • QA
  • react-native
  • reactjs
  • scss
  • stylesheet
  • styling
  • Testing
  • Test Script
  • UI-UX

Newsletter

Newsletter

Post navigation

Previous Best Pet Apps for Dog Owners
Next Port your mobile apps on to web lightning quick with Flutter
Schedule an Appointment with our Mobile App Development Expert
Footer Menu
  • Company
    • About Us
    • Portfolio
    • Blog
    • Careers
    • Contact Us
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise App Development
    • AR/VR Application Development
    • IoT Application Development
    • Wearables Apps Development
    • Field Sales
    • On-Demand Apps Development
  • Technologies
    • iOS
    • Android
    • React Native
    • Flutter
    • Ionic
    • Xamarin
    • NativeScript
    • HTML5
    • Sencha
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical
    • Manufacturing
    • Automotive
    • Logistics
    • Education

US Office

Belmont, California – 1301 Shoreway Road, Suite 160, Belmont, CA 94002

Pleasanton, California – 6701 Koll Center Parkway, #250 Pleasanton, CA 94566

Tel: +1 408 365 4638
Support: +1 (408) 512 1812

Mexico Office

Amado Nervo #2200, Edificio Esfera 1 piso 4, Col. Jardines del Sol, CP. 45050, Zapopan, Jalisco, Mexico

Bulgaria Office

49 Bacho Kiro Street, Sofia, 1000, Bulgaria

Canada Office​

895 Don Mills Road, Two Morneau Shepell Centre, Suite 900, Toronto, Ontario, M3C 1W3, Canada

UK Office

Export House, Cawsey Way, Woking Surrey, GU21 6QX

Tel: +44 (0) 14 8361 6611

UAE Office

Dubai, UAE – Dubai Internet City, 1st Floor, Building Number 12, Premises ED 29, Dubai, UAE

Tel: +971-55-6540154
Tel: +971-04-2505173

Pakistan Office

Folio3 Tower, Plot 26, Block B, SMCH Society, Main Shahrah-e-Faisal, Karachi.

First Floor, Blue Mall 8-R, MM Alam Road Gulberg III, Lahore.

Tel: +92-21-3432 3721-4 

© 2025, Folio3 Software Inc., All rights reserved.

  • Privacy policy and terms of use
  • Cookie Policy
Follow us on
Facebook-f Linkedin-in Instagram

Get a free app audit

[contact-form-7 id="3548" title="Float Banner Form"]