Write text on Canvas using React
Today we’ll show you how to write text on canvas using React. In the previous article, we taught you how to draw a line and rectangle on Canvas using ReactJS.
Steps to write text on Canvas
- Create a react application
- Add the canvas and initialize the context
- Function to write a text
- Write a text
- Output
1. Create a react application
First we have to create a simple react application using create-react-app. Check out the below link for more details.
2. Add the canvas and initialize the context
In the next step, we have to render the canvas element in the DOM and initialize the context of the canvas. Check out the following link for more details.
How to initialize the context of the canvas
3. Function to write a text
Use the following function to write a text on Canvas using react code.
1 2 3 4 5 6 7 8 9 10 11 12 13 | // write a text const writeText = (info, style = {}) => { const { text, x, y } = info; const { fontSize = 20, fontFamily = 'Arial', color = 'black', textAlign = 'left', textBaseline = 'top' } = style; ctx.beginPath(); ctx.font = fontSize + 'px ' + fontFamily; ctx.textAlign = textAlign; ctx.textBaseline = textBaseline; ctx.fillStyle = color; ctx.fillText(text, x, y); ctx.stroke(); } |
In the above code, we are drawing a text by passing two major parameters such as info and style. We have passed the x and y points via info along with the text param and manage the color, font family, text align and text baseline by passing into the second param. We have used the fillText() method to write a text on canvas.
4. Write a text
Let’s draw a text by using the above method.
1 2 3 4 5 6 7 8 9 | useEffect(() => { writeText({ text: 'Clue Mediator!', x: 180, y: 70 }); writeText({ text: 'Welcome to ', x: 180, y: 70 }, { textAlign: 'right' }); writeText({ text: 'www.cluemediator.com', x: 180, y: 130 }, { fontSize: 30, color: 'green', textAlign: 'center' }); writeText({ text: 'Like, Share and Subscribe...', x: 180, y: 200 }, { fontSize: 14, fontFamily: 'cursive', color: 'blue', textAlign: 'center' }); }, []); |
5. Output
Combine all code together and see how it looks.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | import React, { useRef, useEffect } from 'react'; function App() { const canvas = useRef(); let ctx = null; // initialize the canvas context useEffect(() => { // dynamically assign the width and height to canvas const canvasEle = canvas.current; canvasEle.width = canvasEle.clientWidth; canvasEle.height = canvasEle.clientHeight; // get context of the canvas ctx = canvasEle.getContext("2d"); }, []); useEffect(() => { writeText({ text: 'Clue Mediator!', x: 180, y: 70 }); writeText({ text: 'Welcome to ', x: 180, y: 70 }, { textAlign: 'right' }); writeText({ text: 'www.cluemediator.com', x: 180, y: 130 }, { fontSize: 30, color: 'green', textAlign: 'center' }); writeText({ text: 'Like, Share and Subscribe...', x: 180, y: 200 }, { fontSize: 14, fontFamily: 'cursive', color: 'blue', textAlign: 'center' }); }, []); // write a text const writeText = (info, style = {}) => { const { text, x, y } = info; const { fontSize = 20, fontFamily = 'Arial', color = 'black', textAlign = 'left', textBaseline = 'top' } = style; ctx.beginPath(); ctx.font = fontSize + 'px ' + fontFamily; ctx.textAlign = textAlign; ctx.textBaseline = textBaseline; ctx.fillStyle = color; ctx.fillText(text, x, y); ctx.stroke(); } return ( <div className="App"> <h3>Write text on Canvas - <a href="http://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <canvas ref={canvas}></canvas> </div> ); } export default App; |
Run the project and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!!
Excellent! Thanks