How to Draw a Line in React Native

Draw a line on Canvas using React

Today we'll show you how to draw a line on canvas using React. In the previous article, we taught you how to draw a rounded rectangle on Canvas using ReactJS.

Steps to draw a line on Canvas

1. Create a react application
2. Add the canvas and initialize the context
3. Function to draw a line
4. Draw a line
5. Output

1. Create a react application

Let's create a react application using create-react-app. You can refer to the following link for more details.

Create React Application

2. Add the canvas and initialize the context

Now, 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 line

Use the following function to draw a line on Canvas using simple react code.

// draw a line const drawLine = ( info , style = { } ) => { const { x , y , x1 , y1 } = info ; const { color = 'black' , width = 1 } = style ; ctx . beginPath ( ) ; ctx . moveTo ( x , y ) ; ctx . lineTo ( x1 , y1 ) ; ctx . strokeStyle = color ; ctx . lineWidth = width ; ctx . stroke ( ) ; }

In the above code, we are drawing a line by passing two major parameters such as info and style. We have passed the starting point and ending point via info param and manage the color and width by passing into the second param.

Here x and y will be considered as the first point of the line and x1 and y1 will be considered as the end point of the line. We have used the moveTo() and lineTo() methods to draw a line.

4. Draw rectangle

Let's draw a line by using the above method.

useEffect ( ( ) => { drawLine ( { x : 20 , y : 20 , x1 : 20 , y1 : 100 } ) ; drawLine ( { x : 50 , y : 50 , x1 : 200 , y1 : 100 } , { color : 'red' } ) ; drawLine ( { x : 300 , y : 250 , x1 : 260 , y1 : 70 } , { color : 'green' , width : 5 } ) ; drawLine ( { x : 70 , y : 240 , x1 : 160 , y1 : 120 } , { color : 'blue' } ) ; } , [ ] ) ;

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

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 ( ( ) => { drawLine ( { x : 20 , y : 20 , x1 : 20 , y1 : 100 } ) ; drawLine ( { x : 50 , y : 50 , x1 : 200 , y1 : 100 } , { color : 'red' } ) ; drawLine ( { x : 300 , y : 250 , x1 : 260 , y1 : 70 } , { color : 'green' , width : 5 } ) ; drawLine ( { x : 70 , y : 240 , x1 : 160 , y1 : 120 } , { color : 'blue' } ) ; } , [ ] ) ; // draw a line const drawLine = ( info , style = { } ) => { const { x , y , x1 , y1 } = info ; const { color = 'black' , width = 1 } = style ; ctx . beginPath ( ) ; ctx . moveTo ( x , y ) ; ctx . lineTo ( x1 , y1 ) ; ctx . strokeStyle = color ; ctx . lineWidth = width ; ctx . stroke ( ) ; } return ( < div className="App" > < h3 > Draw a line 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.

Output – Draw a line on Canvas using React – Clue Mediator

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

Demo & Source Code

Github Repository StackBlitz Project

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

Tags: CanvasReact ExampleReact Hooks

You may also like...

How to Draw a Line in React Native

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

Share this post