title: Canvas not responding inside html script
body: <p>I am trying to show my image in the JavaScript canvas, but the code is not working. It is not showing anything. Where is my mistake?</p>
  
  <p>I have tried to debug the code using Google's debugger but nothing has come up.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
  
    &lt;style&gt;
      #canvas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    &lt;/style&gt;
      &lt;/body&gt;
      &lt;script&gt;
      const context;
      const gameCanvas = document.getElementById("canvas");
      context=gameCanvas.getContext("2d");
      //context.canvas.height=500;
      //context.canvas.width=500;
  
  
      var imgObj = new Image();
      imgObj.src = "dragon.jpg";
      var x = 100;
      var y = 100;
  
  
  
      imgObj.onload = function(){
          context.drawImage(imgObj,x,y);
      }
  
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want to see a canvas and the image in that canvas when I load this html file.</p>