title: Cannot read property 'getContext' of null is driving me crazy
body: <p>I don't understand what I'm doing wrong, I'm following a video tutorial of YouTube, and replicating it on jsfiddle, codepen and directly on my coder brackets and I'm getting the same error all the time:</p>
  <p>Cannot read property 'getContext' why? can someone tell me what I'm doing wrong? I thought could be the image path, I've tried with an image src directly from a folder ./images/image1.jpg and I've tried with a web link address to an img. None of them work.</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>const canvas = document.getElementById("canvas1");
  const ctx = canvas.getContext("2d");
  canvas.width = 800;
  canvas.height = 400;
  
  const image1 = new Image();
  image1.src = 'https://reason.org/wp-content/uploads/2018/01/guybentley.jpg';
  image1.addEventListener('load', function(){
    ctx.drawImage(image1, 0,0);
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color:black;
    margin:0;
    padding:0;
  }
  
  #canvas1 {
    border:solid 3px white;
    width:800px;
    height:400px;
    position:absolute;
    top:0;
    left:0;
    display:block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;div id="canvas1"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>