Draw a rectangle on Canvas using React
Many developers in ReactJS struggle with the drawing element on canvas therefore we have come up with the new article where we show you how to draw a rectangle on Canvas using React.
Steps to draw a rectangle on Canvas
- Create a react application
- Add the canvas and initialize the context
- Function to draw a rectangle
- Function to draw a rectangle with background
- Draw rectangles
- Output
1. Create a react application
In the first step, we’ll create a react application using create-react-app. If you don’t know how to implement a react application then refer to this link.
2. Add the canvas and initialize the context
Let’s render the canvas element in the DOM and initialize the context of the canvas.
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 | 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"); }, []); return ( <div className="App"> <h3>Draw a rectangle 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; |
Here we have used the useRef and useEffect hooks to manage the canvas element. Check out the more example of the React Hooks.
You can also see that we have set the width and height of the canvas and initialize the context for further use.
Use the following style to design a canvas.
1 2 3 4 5 6 7 8 9 10 11 | .App { margin: 30px; } canvas { width: 400px; height: 300px; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; } |
3. Function to draw a rectangle
Now we’ll write a function to draw a rectangle on Canvas using react code.
1 2 3 4 5 6 7 8 9 10 11 | // draw rectangle const drawRect = (info, style = {}) => { const { x, y, w, h } = info; const { borderColor = 'black', borderWidth = 1 } = style; ctx.beginPath(); ctx.strokeStyle = borderColor; ctx.lineWidth = borderWidth; ctx.rect(x, y, w, h); ctx.stroke(); } |
In the above code, we are handling two different parameters such as info and style to draw a rectangle using the rect method.
We’ll use the x, y, w as width and h as height from the info. We will also use the borderColor and borderWidth from the style to decorate the rectangle.
4. Function to draw a rectangle with background
Let’s write one more function to draw a rectangle with background color.
1 2 3 4 5 6 7 8 9 | // draw rectangle with background const drawFillRect = (info, style = {}) => { const { x, y, w, h } = info; const { backgroundColor = 'black' } = style; ctx.beginPath(); ctx.fillStyle = backgroundColor; ctx.fillRect(x, y, w, h); } |
Same as the previous function, we will use the two different parameters info and style. But here we will use the fillRect method to draw a filled rectangle.
5. Draw rectangles
We’ll use the above two functions to draw rectangles on page load.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | useEffect(() => { const r1Info = { x: 20, y: 30, w: 100, h: 50 }; const r1Style = { borderColor: 'red', borderWidth: 10 }; drawRect(r1Info, r1Style); const r2Info = { x: 100, y: 100, w: 80, h: 150 }; drawRect(r2Info); const r3Info = { x: 250, y: 80, w: 80, h: 120 }; drawFillRect(r3Info, { backgroundColor: 'green' }); const r4Info = { x: 200, y: 220, w: 100, h: 50 }; drawFillRect(r4Info); }, []); |
6. Output
Let’s 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 51 52 53 54 55 56 57 58 59 60 61 62 63 | 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(() => { const r1Info = { x: 20, y: 30, w: 100, h: 50 }; const r1Style = { borderColor: 'red', borderWidth: 10 }; drawRect(r1Info, r1Style); const r2Info = { x: 100, y: 100, w: 80, h: 150 }; drawRect(r2Info); const r3Info = { x: 250, y: 80, w: 80, h: 120 }; drawFillRect(r3Info, { backgroundColor: 'green' }); const r4Info = { x: 200, y: 220, w: 100, h: 50 }; drawFillRect(r4Info); }, []); // draw rectangle const drawRect = (info, style = {}) => { const { x, y, w, h } = info; const { borderColor = 'black', borderWidth = 1 } = style; ctx.beginPath(); ctx.strokeStyle = borderColor; ctx.lineWidth = borderWidth; ctx.rect(x, y, w, h); ctx.stroke(); } // draw rectangle with background const drawFillRect = (info, style = {}) => { const { x, y, w, h } = info; const { backgroundColor = 'black' } = style; ctx.beginPath(); ctx.fillStyle = backgroundColor; ctx.fillRect(x, y, w, h); } return ( <div className="App"> <h3>Draw a rectangle 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..!!
