title: Image not appearing in canvas - sometimes
body: <p>This works great on all of my tests, but on the live system, I have a problem.</p>
  
  <p>There are three separate but identical canvases.  They are all initially painted with 640x480 jpg images.  The third is then updated every second with a new 640x480 jpg image.</p>
  
  <p>For some reason, the original static image for the third canvas - and that canvas only - doesn't load from the live server, only on the tests.</p>
  
  <p>Here's the html:</p>
  
  <pre><code>    &lt;div style="padding: 1vw;"&gt;
      &lt;a href="/virtualscribe" class="camLink"&gt;
          &lt;div class="camDiv"&gt;
              &lt;div class="camBox" id="picBoxLeft"&gt;
                  &lt;canvas id="canvasLeft" class="camBorder"&gt;&lt;/canvas&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="/videos" class="camLink"&gt;
          &lt;div class="camDiv"&gt;
              &lt;div class="camBox" id="picBoxCenter"&gt;
                  &lt;canvas id="canvasCenter" class="camBorder"&gt;&lt;/canvas&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/a&gt;
      &lt;div class="camDiv"&gt;
          &lt;div class="camBox" id="picBoxRight"&gt;
              &lt;canvas id="canvasRight" class="camBorder"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>    &lt;style&gt;
      .camBox {
          max-width: 28vw;
          width: 28vw;
          height: 21vw;
          max-height: 21vw;
          display: inline-block;
      }
      .camDiv {
          padding: 1.5vw;
          display: inline-block;
      }
      .camBorder {
          border: 0.6vw solid #fe890f;
          border-top-left-radius: 3.3vw;
          border-bottom-right-radius: 3.3vw;
      }
      .camLink {
          color: transparent;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>And here's the JavaScript:</p>
  
  <pre><code>    var refreshTimer;
      var imgLiveCam;
  
      function drawPictureBox(img, canvas, text) {
          var context = canvas.getContext("2d");
          context.drawImage(img, 0, 0, canvas.width, canvas.height);
          context.globalAlpha = 0.6;
          context.fillStyle = "rgb(244,121,32)";
          context.fillRect(0, canvas.height * 0.67, canvas.width, canvas.height * 0.33);
          context.globalAlpha = 1;
          var maxWidth = canvas.width;
          var x = canvas.width / 2;
          var y = canvas.height * 0.85;
          context.font = canvas.width / 12 + 'px Oswald';
          context.strokeStyle = 'black';
          context.lineWidth = 2;
          context.textAlign = "center";
          context.strokeText(text, x, y, maxWidth);
          context.fillStyle = 'white';
          context.fillText(text, x, y, maxWidth);
      };
      function drawCamBox(img, logo, canvas) {
          var context = canvas.getContext("2d");
          context.drawImage(img, 0, 0, canvas.width, canvas.height);
          context.globalAlpha = 0.6;
          context.fillStyle = "rgb(244,121,32)";
          context.fillRect(0, canvas.height * 0.67, canvas.width, canvas.height * 0.33);
          var eSize = canvas.height / 10;
          context.globalAlpha = 1;
          context.drawImage(logo, 2, canvas.height * 0.67 - eSize, eSize, eSize);
          var now = new Date();
          var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
          var maxWidth = canvas.width * 0.33;
          var x = canvas.width - 10 - maxWidth;
          var y = canvas.height * 0.67 - 10;
          context.font = maxWidth / 10 + "px Arial";
          context.strokeStyle = 'black';
          context.lineWidth = 2;
          context.strokeText(text, x, y, maxWidth);
          context.fillStyle = 'white';
          context.fillText(text, x, y, maxWidth);
          text = 'View Our Production Floor';
          context.textAlign = "center";
          maxWidth = canvas.width;
          x = canvas.width / 2;
          y = canvas.height * 0.85;
          context.font = canvas.width / 12 + 'px Oswald';
          context.strokeText(text, x, y, maxWidth);
          context.fillText(text, x, y, maxWidth);
      }
      function addResizeListener(fn) {
          if (window.attachEvent) {
              window.attachEvent('onresize', fn)
          } else if (window.addEventListener) {
              window.addEventListener('resize', fn, true);
          };
      }
      function initCam() {
          var imgLeft = new Image();
          imgLeft.onload = function () {
              var canvas = document.getElementById("canvasLeft");
              var picBox = document.getElementById("picBoxLeft");
              var drawFn = function () {
                  canvas.height = picBox.clientHeight;
                  canvas.width = picBox.clientWidth;
                  drawPictureBox(imgLeft, canvas, 'Looking for a Scribe?');
              };
              drawFn();
              addResizeListener(drawFn);
          }
          var imgCenter = new Image();
          imgCenter.onload = function () {
              var canvas = document.getElementById("canvasCenter");
              var picBox = document.getElementById("picBoxCenter");
              var drawFn = function () {
                  canvas.height = picBox.clientHeight;
                  canvas.width = picBox.clientWidth;
                  drawPictureBox(imgCenter, canvas, 'Watch In-Depth Videos');
              };
              drawFn();
              addResizeListener(drawFn);
          }
          imgLiveCam = new Image();
          var logo = new Image();
          logo.src = "e.png";
          imgLiveCam.onload = function () {
              var canvas = document.getElementById("canvasRight");
              var picBox = document.getElementById("picBoxRight");
              var drawFn = function () {
                  canvas.height = picBox.clientHeight;
                  canvas.width = picBox.clientWidth;
                  drawCamBox(imgLiveCam, logo, canvas);
              };
              drawFn();
              imgLiveCam.onload = drawFn;
              addResizeListener(drawFn);
          }
          imgLeft.src = "scribe.jpg";
          imgCenter.src = "doc-with-spine.jpg";
          imgLiveCam.src = "camloading.jpg";
          refreshTimer = setTimeout(refresh, 499);
      }
      function refresh() {
          clearTimeout(refreshTimer);
          imgLiveCam.src = "http://cams.edataservices.com/17fcam.jpg?t=" + new Date().getTime();
          refreshTimer = setTimeout(refresh, 1009);
      }
  </code></pre>
  
  <p>Any idea why the third canvas starts out blank most of the time?</p>