title: cannot get processing script to run
body: <p>I'm doing a Processing.js tutorial found here:http://processingjs.org/articles/jsQuickStart.html</p>
  
  <p>When I load my document into the browser I get two errors:</p>
  
  <pre><code>uncaught exception: called Processing constructor without passing canvas element reference or id.
  </code></pre>
  
  <p>And</p>
  
  <pre><code>Access to restricted URI denied
  
  xhr.send(null)
  </code></pre>
  
  <p>In regard to the first error, I pass the canvas element id like so:</p>
  
  <pre><code>var canvas = document.getElementById('canvas1');
  </code></pre>
  
  <p>I also checked and made sure that the canvas element in the HTML had the <code>canvas1</code> id.</p>
  
  <p>I'm not sure what went wrong with the second error.</p>
  
  <p>Please help me see what I'm doing wrong.</p>
  
  <p>This is my code:</p>
  
  <pre><code>function sketchProc(processing) {
          processing.draw = function() {
              var centerX = processing.width / 2; 
              var centerY = processing.height / 2;
              var maxArmLength = Math.min(centerX, centerY);
  
              function drawArm(position, lengthScale, weight) {
                  processing.strokeWeight(weight);
                  processing.line(centerX, centerY, 
                      centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
                      centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
              }
  
              processing.background(224);
  
              var now = new Date();
  
              var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
              drawArm(hoursPosition, 0.5, 5);
          }
      }
  
      var canvas = document.getElementById('canvas1');
  
      var processingInstance = new Processing(canvas, sketchProc);
  </code></pre>