Realtime Paint Application - canvas

canvas.js

// canvas.js

...
import Pusher from 'pusher-js';
class Canvas extends Component {
  constructor(props) {
    super(props);
    ...
    this.pusher = new Pusher('PUSHER_KEY', {
      cluster: 'eu',
    });
  }
  ...
  componentDidMount(){
    ...
    const channel = this.pusher.subscribe('painting');
    channel.bind('draw', (data) => {
      const { userId, line } = data;
      if (userId !== this.userId) {
        line.forEach((position) => {
          this.paint(position.start, position.stop, this.guestStrokeStyle);
        });
      }
    });
  }
  ...