title: how to draw rectangle on a image dynamically using canvas in react js
body: <pre><code>import React, {Component, useState, useEffect} from 'react'
  import {Line, SteppedLine, PolyLine, Circle, Rectangle} from 'draw-shape-reactjs';
  import img from '../images/mountains1.jpg'
  import './parentContainerCSS.css'
  
  class ParentContainer extends Component {
    constructor(props) {
      super(props)
  
      this.state = {
        point1: [0, 0],
        point2: [0, 0],
        widthRect: 0,
        heightRect: 0
      }
  
      this.init = this.init.bind(this)
      this.mouseDown = this.mouseDown.bind(this)
      this.mouseUp = this.mouseUp.bind(this)
      this.mouseMove = this.mouseMove.bind(this)
      this.draw = this.draw.bind(this)
      this.drawImage = this.drawImage.bind(this)
  
  
    }
  
    componentDidMount() {
      this.canvas = document.getElementById('canvas')
      this.ctx = this.canvas.getContext('2d')
      this.rect = {}
      this.canvasX = this.canvas.offsetLeft
      this.canvasY = this.canvas.offsetTop
      this.drag = false
  
      this.init()
    }
  
    drawImage = () =&gt; {
      console.log('im in drawImage')
      this.backgroundImage = new Image()
  
      this.backgroundImage.src = {
        img
      }
  
      this.backgroundImage.onload = function() {
        console.log('backgroundImage is loaded')
        this.ctx.drawImage(this.backgroundImage, 0, 0)
      }
    }
  
    init = () =&gt; {
      this.canvas.addEventListener('mousedown', this.mouseDown, false)
      this.canvas.addEventListener('mouseup', this.mouseUp, false)
      this.canvas.addEventListener('mousemove', this.mouseMove, false)
    }
  
    mouseDown = (e) =&gt; {
  
      this.rect.x = e.pageX - this.canvasX + 0
      this.rect.y = e.pageY - this.canvasY + 0
      this.rect.w = 0
      this.rect.h = 0
      this.setState({
        point1: [this.rect.x, this.rect.y],
        point2: [0, 0],
        widthRect: 0,
        heightRect: 0
      })
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
      this.drag = true
    }
  
    mouseUp = () =&gt; {
      this.drag = false
    }
  
    mouseMove = (e) =&gt; {
  
      if (this.drag) {
        this.rect.w = (e.pageX - this.canvasX) - this.rect.x
        this.rect.h = (e.pageY - this.canvasY) - this.rect.y
        this.setState({
          point2: [this.rect.x + this.rect.w, this.rect.y + this.rect.h],
          point1: [this.rect.x, this.rect.y],
          widthRect: Math.abs(this.rect.w),
          heightRect: Math.abs(this.rect.h)
        })
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
        this.draw()
      }
    }
  
    draw = () =&gt; {
      this.ctx.setLineDash([2])
  
      this.ctx.strokeRect(this.rect.x, this.rect.y, this.rect.w, this.rect.h)
    }
  
    render() {
  
  
      return ( &lt;
        div &gt;
  
        &lt;
        canvas id = "canvas"
        width = "800"
        height = "450"
        src = {
          img
        } &gt; &lt; /canvas&gt;
  
        &lt;
        button onClick = {
          this.drawImage
        } &gt; Draw Image &lt; /button&gt; &lt;
        p &gt; &lt; strong &gt; (X1, Y1): &lt; /strong&gt; ({this.state.point1[0]}, {this.state.point1[1]})&lt;/p &gt;
        &lt;
        p &gt; &lt; strong &gt; (X2, Y2): &lt; /strong&gt; ({this.state.point2[0]}, {this.state.point2[1]})&lt;/p &gt;
        &lt;
        p &gt; &lt; strong &gt; Size: &lt; /strong&gt; ({this.state.widthRect}X{this.state.heightRect})&lt;/p &gt;
        &lt;
        p id = 'demo' &gt; &lt; /p&gt;
  
        &lt;
        /div&gt;
      )
    }
  }
  
  export default ParentContainer
  </code></pre>
  
  <p>currently im having a white canvas as output on which i can draw rectangle by dragging mouse but i want to do so on a image instead of white canvas
  i'm also having problem with my backgroundImage.onload event which is not working or background image is not loading 
  is there any other way of doing this or the current code can be improved??</p>