Canvas

import React from 'react';
import ReactDOM from 'react-dom';




class CanvasComponent extends React.Component {

    ;
    constructor(props) {
        super(props);

        this.state = {
            x: 0,
            y: 0,
            mousepos: {},

            move: false,
            isDown: false,
            pos_prev: false,
            previousPointX: '',
            previousPointY: ''


        };

        this.handleMouseDown = this.handleMouseDown.bind(this);
        this.handleMouseMove = this.handleMouseMove.bind(this);
        this.handleMouseUp = this.handleMouseUp.bind(this);


    }




    _onMouseMove(e) {

        e.preventDefault();

        const { x, y, } = this.state;


        this.setState({ x: e.screenX, y: e.screenY, move: true})
        this.setState({mousepos: {x,y}})
       console.log(this.state.move);


        let timeout;
        (() => {
            clearTimeout(timeout);
            timeout = setTimeout(() => this.setState({ move: false }), 50);
        })();

        console.log(this.state.move);



    }





   handleMouseDown(event) {
        console.log(event);
        this.setState({
            isDown: true,
            previousPointX: event.offsetX,
            previousPointY: event.offsetY
        }
        )
    }








    dibuix = () => {


        socket.on('dibuixa_linea', data => {
        let line = data.line;
        const canvas = ReactDOM.findDOMNode(this.refs.canvas);
        let width = canvas.with
        let height = canvas.height
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.lineWidth = 18;

        //Aqui el que fem es detectar dos punts que delimiten les cordenades X,Y i unirlos amb una linea
        ctx.moveTo(line[0].x * width, line[0].y * height);
        ctx.lineTo(line[1].x * width, line[1].y * height);
        ctx.stroke();
      });

    }


     buclePrincipal = () => {

        const {x,y} = this.state;

      if( this.state.isDown && this.state.move && this.state.pos_prev){

        socket.emit('dibuixa_linea', { line: [this.state.mousepos, this.state.pos_prev] })


      }
      this.setState({ pos_prev: {x,y}})
      setTimeout(this.buclePrincipal, 25);
      this.buclePrincipal();
   }



    handleMouseMove(event) {

    }


    handleMouseUp(event) {
        this.setState({
            isDown: false
        });

        }


    componentDidMount() {
        const canvas = ReactDOM.findDOMNode(this.refs.canvas);
        const ctx = canvas.getContext("2d");
        ctx.fillStyle = 'rgb(200,255,255)';
        ctx.fillRect(0, 0, 640, 425);

    }

    render() {
        const { x, y } = this.state;



        return (

            <div onMouseMove={this._onMouseMove.bind(this)}>
                <h1>COORDENADAS: {x} {y} </h1>

                <canvas id="canvas" ref="canvas"
                    width={640}
                    height={425}

                    onMouseDown={
                        e => {
                            let nativeEvent = e.nativeEvent;
                            this.handleMouseDown(nativeEvent);
                        }}
                    onMouseMove={
                        e => {
                            let nativeEvent = e.nativeEvent;
                            this.handleMouseMove(nativeEvent);
                        }}

                    onMouseUp={
                        e => {
                            let nativeEvent = e.nativeEvent;
                            this.handleMouseUp(nativeEvent);
                        }}
                />




            </div>
        );
    }
}



export default CanvasComponent;