title: Drawing a box onto a Image with Vue and Bootstrap
body: <p>I am building an app where you can upload pictures, they are sent to a server where an object is detected on the image and the position of the object in the image is returnd. Now i want to mark the area with the detected object in the image, but i am struggeling with Javascript and Vue here a little bit. </p>
  
  <p>Here is the code from my vue component:</p>
  
  <pre><code>&lt;b-card title="Result" class="box"&gt;
          &lt;span v-if="upload_success"&gt;
            &lt;b-img v-bind:src="'http://localhost:5000/' + image_url" fluid-grow alt="Fluid-grow image" id="c"&gt;&lt;/b-img&gt;
            &lt;p&gt;Category: {{ product_category }}&lt;/p&gt;
          &lt;/span&gt;
        &lt;/b-card&gt;
  </code></pre>
  
  <p>and my draw method:</p>
  
  <pre><code>    draw () {
    let c = document.getElementById('c')
    let ctx = c.getContext('2d')
    this.canvas = ctx
    this.canvas.beginPath()
    this.canvas.rect(this.box[0], this.box[1], this.box[2], this.box[3])
    this.canvas.stroke()
  }
  </code></pre>
  
  <p>testing this results in the following Error:</p>
  
  <pre><code>Uncaught (in promise) TypeError: c.getContext is not a function
  </code></pre>
  
  <p>pointing me to the draw function. what am i doing wrong here? thanks!!</p>