Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- class MyRect extends Component<Props, State> {
- state = {
- width: window.innerWidth,
- height: window.innerHeight
- }
- componentDidMount() {
- this.updateCanvas()
- window.addEventListener("resize", this.resizeCanvas)
- }
- componentWillUnmount() {
- window.removeEventListener('resize', this.resizeCanvas);
- }
- updateCanvas() {
- const canvas = document.getElementById('canvass') as HTMLCanvasElement
- const ctx: CanvasRenderingContext2D = canvas.getContext('2d')
- for (let x = 0; x < this.state.width; x += 32) {
- for (let y = 0; y < this.state.height; y += 32) {
- ctx.fillRect(x, y, 3, 3)
- }
- }
- }
- resizeCanvas = () => {
- this.setState({
- width: window.innerWidth,
- height: window.innerHeight
- })
- this.updateCanvas()
- }
- render() {
- const { classes } = this.props
- return (
- <div className={classes.canvas}>
- <canvas id="canvass" ref="canvas" width={this.state.width + 'px'} height={this.state.height + 'px'}/>
- </div>
- )
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement