Draw a rounded Rectangle on Canvas using React
Today we’ll show you how to draw a rounded rectangle on canvas using React. In the previous article, we taught you how to draw a rectangle on Canvas using ReactJS.
Steps to draw a rounded rectangle on Canvas
- Create a react application
- Add the canvas and initialize the context
- Function to draw a rounded rectangle
- Draw rectangle
- Output
1. Create a react application
In the first step, we’ll create a simple react application using create-react-app. Refer to this link It will help you to create a react application.
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. Refer to the link below.
How to initialize the context of the canvas
3. Function to draw a rounded rectangle
Use the following function to draw a rectangle on Canvas using react code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // draw a rounded rectangle with background const roundRect = (info, radius = { tr: 4, br: 4, bl: 4, tl: 4 }, color = '#ffffff') => { const { x, y, w, h } = info; const r = x + w; const b = y + h; ctx.beginPath(); ctx.fillStyle = color; ctx.moveTo(x + radius.tl, y); ctx.lineTo(r - radius.tr, y); ctx.quadraticCurveTo(r, y, r, y + radius.tr); ctx.lineTo(r, y + h - radius.br); ctx.quadraticCurveTo(r, b, r - radius.br, b); ctx.lineTo(x + radius.bl, b); ctx.quadraticCurveTo(x, b, x, b - radius.bl); ctx.lineTo(x, y + radius.tl); ctx.quadraticCurveTo(x, y, x + radius.tl, y); ctx.stroke(); ctx.fill(); ctx.closePath(); } |
In the above code, we are handing three different parameters as info, radius and color to draw a rounded rectangle using the lineTo() and quadraticCurveTo() methods.
We’ll use the x, y, w as width and h as height from the info and also use the tr as top right, br as bottom right, bl as bottom left and tl as top left from the radius param.
4. Draw rectangle
Let’s draw a rounded rectangle by using the above method.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | useEffect(() => { const r1Info = { x: 20, y: 30, w: 100, h: 50 }; const r1Radius = { tr: 5, br: 40, bl: 4, tl: 20 }; roundRect(r1Info, r1Radius, 'green'); const r2Info = { x: 100, y: 100, w: 80, h: 150 }; const r2Radius = { tr: 20, br: 20, bl: 20, tl: 20 }; roundRect(r2Info, r2Radius); const r3Info = { x: 250, y: 80, w: 80, h: 120 }; const r3Radius = { tr: 0, br: 0, bl: 0, tl: 0 }; roundRect(r3Info, r3Radius, 'blue'); const r4Info = { x: 200, y: 220, w: 100, h: 50 }; roundRect(r4Info, undefined, 'black'); }, []); |
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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 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 r1Radius = { tr: 5, br: 40, bl: 4, tl: 20 }; roundRect(r1Info, r1Radius, 'green'); const r2Info = { x: 100, y: 100, w: 80, h: 150 }; const r2Radius = { tr: 20, br: 20, bl: 20, tl: 20 }; roundRect(r2Info, r2Radius); const r3Info = { x: 250, y: 80, w: 80, h: 120 }; const r3Radius = { tr: 0, br: 0, bl: 0, tl: 0 }; roundRect(r3Info, r3Radius, 'blue'); const r4Info = { x: 200, y: 220, w: 100, h: 50 }; roundRect(r4Info, undefined, 'black'); }, []); // draw a rounded rectangle with background const roundRect = (info, radius = { tr: 4, br: 4, bl: 4, tl: 4 }, color = '#ffffff') => { const { x, y, w, h } = info; const r = x + w; const b = y + h; ctx.beginPath(); ctx.fillStyle = color; ctx.moveTo(x + radius.tl, y); ctx.lineTo(r - radius.tr, y); ctx.quadraticCurveTo(r, y, r, y + radius.tr); ctx.lineTo(r, y + h - radius.br); ctx.quadraticCurveTo(r, b, r - radius.br, b); ctx.lineTo(x + radius.bl, b); ctx.quadraticCurveTo(x, b, x, b - radius.bl); ctx.lineTo(x, y + radius.tl); ctx.quadraticCurveTo(x, y, x + radius.tl, y); ctx.stroke(); ctx.fill(); ctx.closePath(); } return ( <div className="App"> <h3>Draw a rounded 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..!!
