import React, {Component} from 'react';

interface AppState {
    color: string  // The current color that's selected by the user.
}

class App extends Component<{}, AppState> {

    canvasRef: any // Could write React.RefObject<HTMLCanvasElement> if we wanted.

    constructor(props: {}) {
        super(props);
        this.canvasRef = React.createRef();
        this.state = {
            color: "blue"
        };
    }

    componentDidMount() {
        this.updateCanvasImage();
    }

    updateCanvasImage() {
        let canvas = this.canvasRef.current;
        let context = canvas.getContext("2d");
        context.fillStyle = this.state.color;
        context.fillRect(50, 50, 150, 100);
    }

    render() {
        return (
            <canvas ref={this.canvasRef} width="500" height="500" />
        );
    }

}

export default App;
