Add canvas border
This commit is contained in:
parent
2874be65d9
commit
fa65c41998
@ -12,7 +12,7 @@ export const App = () => {
|
|||||||
<main>
|
<main>
|
||||||
<Canvas />
|
<Canvas />
|
||||||
</main>
|
</main>
|
||||||
<footer>Made by Alfred Melch</footer>
|
<footer>This is the footer</footer>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
3
src/components.js/Canvas.css
Normal file
3
src/components.js/Canvas.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.border {
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
@ -1,6 +1,8 @@
|
|||||||
import React, { useLayoutEffect, useRef } from 'react'
|
import React, { useLayoutEffect, useRef } from 'react'
|
||||||
import { main } from '../lib'
|
import { main } from '../lib'
|
||||||
|
|
||||||
|
import styles from './Canvas.css'
|
||||||
|
|
||||||
export const Canvas = () => {
|
export const Canvas = () => {
|
||||||
const canvasRef = useRef(null)
|
const canvasRef = useRef(null)
|
||||||
|
|
||||||
@ -8,5 +10,9 @@ export const Canvas = () => {
|
|||||||
main(canvasRef.current)
|
main(canvasRef.current)
|
||||||
})
|
})
|
||||||
|
|
||||||
return <canvas width={500} height={400} ref={canvasRef} />
|
return (
|
||||||
|
<div className={styles.border}>
|
||||||
|
<canvas width={500} height={400} ref={canvasRef} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user