Github React Native Art Draw Circle

Draw a rectangle on Sheet using React

Many developers in ReactJS struggle with the cartoon element on canvas therefore we have come upwardly with the new article where we show you how to draw a rectangle on Sheet using React.

Steps to depict a rectangle on Canvas

Create a react awarding
Add the sail and initialize the context
Function to draw a rectangle
Function to draw a rectangle with background
Describe rectangles
Output

ane. Create a react application

In the first step, nosotros'll create a react application using create-react-app. If y'all don't know how to implement a react application then refer to this link.

2. Add the canvas and initialize the context

Let's return the canvas element in the DOM and initialize the context of the sheet.

two

three

nine

thirteen

fifteen

sixteen

twenty

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 sheet

const canvasEle = canvas . current ;

canvasEle . width = canvasEle . clientWidth ;

canvasEle . height = canvasEle . clientHeight ;

// get context of the canvas

ctx = canvasEle . getContext ( "2d" ) ;

} , [ ] ) ;

render (

< div className="App" >

< h3 > Draw a rectangle on Sheet - < a href="http://www.cluemediator.com" target="_blank" rel="noopener noreferrer" > Clue Mediator </a > </h3 >

< canvass ref={ canvas } > </canvass >

</div >

) ;

}

consign default App ;

Here nosotros take used the useRef and useEffect hooks to manage the sail element. Cheque out the more example of the React Hooks.

You tin also see that we accept set up the width and height of the sheet and initialize the context for further utilize.

Use the post-obit style to design a canvas.

. App {

margin : 30px ;

}

canvass {

width : 400px ;

acme : 300px ;

background-colour : #f5f5f5;

edge : 1px solid #ccc;

border-radius : 4px ;

}

3. Part to draw a rectangle

Now we'll write a function to draw a rectangle on Canvas using react lawmaking.

// depict rectangle

const drawRect = ( info , style = { } ) => {

const { x , y , west , h } = info ;

const { borderColor = 'black' , borderWidth = 1 } = way ;

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.

Nosotros'll apply the 10, y, west as width and h every bit acme from the info. We will also apply the borderColor and borderWidth from the style to decorate the rectangle.

4. Function to depict a rectangle with background

Let'southward write one more function to draw a rectangle with groundwork color.

// depict rectangle with background

const drawFillRect = ( info , manner = { } ) => {

const { x , y , westward , h } = info ;

const { backgroundColor = 'black' } = mode ;

ctx . beginPath ( ) ;

ctx . fillStyle = backgroundColor ;

ctx . fillRect ( x , y , w , h ) ;

}

Same every bit the previous function, nosotros will apply the ii different parameters info and style. But here we will employ the fillRect method to draw a filled rectangle.

v. Draw rectangles

We'll employ the above two functions to depict rectangles on page load.

useEffect ( ( ) => {

const r1Info = { x : xx , y : xxx , w : 100 , h : fifty } ;

const r1Style = { borderColor : 'blood-red' , borderWidth : x } ;

drawRect ( r1Info , r1Style ) ;

const r2Info = { ten : 100 , y : 100 , w : 80 , h : 150 } ;

drawRect ( r2Info ) ;

const r3Info = { 10 : 250 , y : eighty , westward : 80 , h : 120 } ;

drawFillRect ( r3Info , { backgroundColor : 'green' } ) ;

const r4Info = { 10 : 200 , y : 220 , w : 100 , h : fifty } ;

drawFillRect ( r4Info ) ;

} , [ ] ) ;

half dozen. Output

Let's combine all code together and run across how information technology looks.

App.js

iii

vii

fourteen

xvi

xviii

xix

twenty

fifty

import React , { useRef , useEffect } from 'react' ;

part App ( ) {

const canvas = useRef ( ) ;

let ctx = cipher ;

// initialize the canvas context

useEffect ( ( ) => {

// dynamically assign the width and height to canvas

const canvasEle = sheet . current ;

canvasEle . width = canvasEle . clientWidth ;

canvasEle . elevation = canvasEle . clientHeight ;

// get context of the canvas

ctx = canvasEle . getContext ( "2d" ) ;

} , [ ] ) ;

useEffect ( ( ) => {

const r1Info = { x : 20 , y : 30 , due west : 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 : eighty , w : fourscore , h : 120 } ;

drawFillRect ( r3Info , { backgroundColor : 'green' } ) ;

const r4Info = { ten : 200 , y : 220 , w : 100 , h : 50 } ;

drawFillRect ( r4Info ) ;

} , [ ] ) ;

// draw rectangle

const drawRect = ( info , style = { } ) => {

const { ten , y , west , h } = info ;

const { borderColor = 'blackness' , borderWidth = 1 } = fashion ;

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 , westward , 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 Sail - < a href="http://www.cluemediator.com" target="_blank" rel="noopener noreferrer" > Clue Mediator </a > </h3 >

< canvas ref={ canvas } > </canvas >

</div >

) ;

}

consign default App ;

Run the projection and cheque the output in the browser.

Output - Draw a rectangle on Canvas using React - Clue Mediator — Output – Draw a rectangle on Sail using React – Clue Mediator

That's it for today.
Thank y'all for reading. Happy Coding..!!

Demo & Source Lawmaking

Github Repository StackBlitz Projection

If you found value in this article,
you can support us by ownership me a coffee! ☕

Tags: CanvasReact ExampleReact Hooks

You may too like...

abbottcomitaxby.blogspot.com

Source: https://www.cluemediator.com/draw-a-rectangle-on-canvas-using-react

Abbott Comitaxby

Github React Native Art Draw Circle

Draw a rectangle on Sheet using React

Steps to depict a rectangle on Canvas

ane. Create a react application

2. Add the canvas and initialize the context

3. Part to draw a rectangle

4. Function to depict a rectangle with background

v. Draw rectangles

half dozen. Output

Demo & Source Lawmaking

You may too like...

Menu Halaman Statis