title: Canvas window.addEvent error when running on gh-pages
body: <p>I have a HTML5 canvas project which allows for the uploading of an image to the canvas. Then it is variously drawn on.</p>
  
  <p>I can run this project locally with</p>
  
  <pre><code>$ http-server
  </code></pre>
  
  <p>Running this locally, I don't get any errors.</p>
  
  <p>The project is on <a href="https://github.com/shanegibney/Scale-Canvas-Upload-Image-Dimensions" rel="nofollow noreferrer">github</a></p>
  
  <p>The issue is that in gh-pages I get the error,</p>
  
  <pre><code>Uncaught TypeError: window.addEvent is not a function
      at (index):22
  </code></pre>
  
  <p>Line 22 is,</p>
  
  <pre><code>   window.addEvent('load', function() {
  </code></pre>
  
  <p>This is also a problem when trying to run this with the snippet tool.</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;&lt;/title&gt;
  
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous"&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://rawgit.com/eligrey/FileSaver.js/master/FileSaver.js"&gt;&lt;/script&gt;
    &lt;script src="https://rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"&gt;&lt;/script&gt;
  
    &lt;script type="text/javascript"&gt;
      var Pts = [];
      var dist;
      let inputValue;
      var ratio;
      var angle;
  
      window.addEvent('load', function() {
        var imageLoader = document.getElementById('imageLoader');
        imageLoader.addEventListener('change', handleImage, false);
        var c = document.getElementById('canvas');
        var ctx = c.getContext('2d');
  
        function handleImage(e) {
          var reader = new FileReader();
          reader.onload = function(event) {
            var img = new Image();
            img.onload = function() {
              c.width = img.width;
              c.height = img.height;
              ctx.drawImage(img, 0, 0);
            }
            img.src = event.target.result;
          }
          reader.readAsDataURL(e.target.files[0]);
        }
  
        $("#canvas").click(function(e) {
          getPosition(e);
        });
      });
  
      var pointSize = 3;
  
      // Event will be a click event which can be retrieved as first parameter in the addEventListener(function(event){}); or in jQuery with $("selector").click(function(event){});
      function getPosition(event) {
        var rect = canvas.getBoundingClientRect();
        var x = event.clientX - rect.left; // x == the location of the click in the document - the location (relative to the left) of the canvas in the document
        var y = event.clientY - rect.top; // y == the location of the click in the document - the location (relative to the top) of the canvas in the document
  
        Pts.push({
          x: x,
          y: y
        });
  
        if (Pts.length == 2) {
          dist = getDistance();
          addInput(Pts[1].x, Pts[1].y);
        }
  
        drawCoordinates(x, y);
  
        if (Pts.length % 2 == 0) {
          drawLine(Pts[Pts.length - 2].x, Pts[Pts.length - 2].y, Pts[Pts.length - 1].x, Pts[Pts.length - 1].y);
        };
      }
  
      function decimalAdjust(type, value, exp) {
        // If the exp is undefined or zero...
        if (typeof exp === 'undefined' || +exp === 0) {
          return Math[type](value);
        }
        value = +value;
        exp = +exp;
        // If the value is not a number or the exp is not an integer...
        if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
          return NaN;
        }
        // If the value is negative...
        if (value &lt; 0) {
          return -decimalAdjust(type, -value, exp);
        }
        // Shift
        value = value.toString().split('e');
        value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
        // Shift back
        value = value.toString().split('e');
        return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
      }
  
      // Decimal round
      if (!Math.round10) {
        Math.round10 = function(value, exp) {
          return decimalAdjust('round', value, exp);
        };
      }
  
      function getDistance() {
        dist = Math.sqrt(Math.pow(Math.abs(Pts[Pts.length - 2].x - Pts[Pts.length - 1].x), 2) + Math.pow(Math.abs(Pts[Pts.length - 2].y - Pts[Pts.length - 1].y), 2));
        return dist.toFixed(2);
      }
  
      function drawLine(x1, y1, x2, y2) {
        var ctx = document.getElementById("canvas").getContext("2d");
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        if (Pts.length &lt; 3) {
          ctx.strokeStyle = 'blue';
        } else {
          ctx.strokeStyle = 'black';
        }
        ctx.stroke();
        dist = getDistance();
        txt = dist * ratio;
  
        if (Pts.length &gt; 2) {
          drawText(txt, x1, y1, x2, y2);
        }
      }
  
      function addInput(x, y) {
        var input = document.createElement('input');
        input.type = 'text';
        input.style.position = 'fixed';
        input.style.left = (x + 4) + 'px';
        input.style.top = (y + 4) + 'px';
        input.onkeydown = handleEnter;
        document.body.appendChild(input);
        input.focus();
        hasInput = true;
      }
  
      function handleEnter(e) {
        var keyCode = e.keyCode;
        if (keyCode === 13) {
          inputValue = this.value;
          document.body.removeChild(this);
          hasInput = false;
          ratio = inputValue / dist;
          if (Pts.length == 2) {
            drawText("reference line = " + dist * ratio, Pts[Pts.length - 2].x, Pts[Pts.length - 2].y, Pts[Pts.length - 1].x, Pts[Pts.length - 1].y);
          }
        }
      }
  
      function drawCoordinates(x, y) {
        var pointSize = 3; // Change according to the size of the point.
        var ctx = document.getElementById("canvas").getContext("2d");
        if (Pts.length &lt; 3) {
          ctx.fillStyle = "blue"; // Red color
        } else {
          ctx.fillStyle = "red"; // Red color
        }
        ctx.beginPath(); //Start path
        ctx.arc(x, y, pointSize, 0, Math.PI * 2, true); // Draw a point using the arc function of the canvas with a point structure.
        ctx.fill(); // Close the path and fill.
      }
  
      function drawText(txt, x1, y1, x2, y2) {
        // (x,y) coordinate of text mid way between both points
        x = ((x2 + x1) / 2) + 5;
        y = ((y2 + y1) / 2) + 5;
        var ctx = document.getElementById("canvas").getContext("2d");
        ctx.save();
        ctx.textBaseline = 'top';
        ctx.textAlign = 'left';
        // ctx.font = font;
        angle = Math.atan((Math.abs(y2 - y1)) / (Math.abs(x2 - x1)));
        console.log(angle);
        ctx.translate(x, y)
        // ctx.rotate(-1 * angle);
        ctx.fillText(txt, 0, 0);
        ctx.restore();
      }
  
      function download_image() {
        // Dump the canvas contents to a file.
        var canvas = document.getElementById("canvas");
        var today = new Date();
        var date = today.getFullYear() + "" + (today.getMonth() + 1) + "" + "" + today.getDate() + "" + (today.getHours() - 2) + "" + today.getMinutes() + "" + today.getSeconds();
        today.getDate();
        canvas.toBlob(function(blob) {
          saveAs(blob, date + "Canvas.png");
        }, "image/png");
      };
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;style media="screen"&gt;
    upload_form {
      background-color: red;
      width: 100%;
      padding: 20px;
    }
  &lt;/style&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-12 upload_form"&gt;
          &lt;label&gt;Image File:&lt;/label&gt;&lt;br/&gt;
          &lt;input type="file" id="imageLoader" name="imageLoader" /&gt;
          &lt;button type="button" onclick="download_image()" name="button"&gt;Save Canvas&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=row&gt;
        &lt;div class="col-md-12"&gt;
          &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help would be greatly appreciated,</p>
  
  <p>Thanks</p>