34 lines
853 B
TypeScript
34 lines
853 B
TypeScript
|
import React from "react"
|
||
|
|
|
||
|
|
import CanvasContext from "./CanvasContext"
|
||
|
|
|
||
|
|
export interface SystemCanvasProps {
|
||
|
|
height: number,
|
||
|
|
width: number,
|
||
|
|
children?: JSX.Element[]
|
||
|
|
}
|
||
|
|
|
||
|
|
function SystemCanvas({ height, width, children }: SystemCanvasProps) {
|
||
|
|
const canvasRef = React.useRef<HTMLCanvasElement>(null)
|
||
|
|
const [context, setContext] = React.useState<CanvasRenderingContext2D>(null)
|
||
|
|
|
||
|
|
React.useEffect(() => {
|
||
|
|
const context = canvasRef.current.getContext("2d")
|
||
|
|
context.save()
|
||
|
|
context.fillStyle = "black"
|
||
|
|
context.fillRect(0, 0, width, height)
|
||
|
|
context.restore()
|
||
|
|
setContext(context)
|
||
|
|
})
|
||
|
|
|
||
|
|
return (<div>
|
||
|
|
<CanvasContext.Provider value={ context }>
|
||
|
|
<canvas width={width} height={height} ref={canvasRef} style={{ width, height }} />
|
||
|
|
{children}
|
||
|
|
</CanvasContext.Provider>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default SystemCanvas
|