title: Canvas draw image with TypeScript
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;canvas id="vm" width="300" height="300"&gt;&lt;/canvas&gt;
   
   &lt;img id ="old" width="300" height="300" src="./img/vumeter.png"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to use the functionality of canvas draw Image in Typescript. 
  I have picture of VU-Meter. I would like to draw a needle (level pointer) with values so that it can oscillate.</p>
  
  <p>I could able to draw a needle which oscillates at the moment. But I wasn't able to draw the canvas element on the image. What am I doing wrong?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class LevelMeter {
  
    private readonly value: Array &lt; number &gt; ;
    ctx: CanvasRenderingContext2D;
  
    constructor(canvas: HTMLCanvasElement, options: Options) {
      this.ctx = &lt; CanvasRenderingContext2D &gt; canvas.getContext('2d');
      this.img = new Image();
      this.img.src = './img/vumeter.png';
      this.img.onload = () =&gt; window.requestAnimationFrame(this.draw.bind(this));
  
    }
  
    draw() {
      let _ctx = this.ctx;
      _ctx.drawImage(this.img, 0, 0);
      _ctx.fillStyle = 'white';
      _ctx.fillRect(0, 0, 500, 500);
      _ctx.save();
      _ctx.strokeStyle = 'red';
      _ctx.translate(150, 180);
      _ctx.rotate((Math.PI * ((Math.random() * 0.5) + 1.25))       _ctx.beginPath(); _ctx.moveTo(0, 0); _ctx.lineTo(160, 0);
        //_ctx.closePath();
        _ctx.stroke(); _ctx.restore();
  
        window.requestAnimationFrame(this.draw.bind(this));
  
      }
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/IAXu6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IAXu6.png" alt="enter image description here"></a></p>