title: JS canvas is displaying at the bottom of page
body: <p>I have this code where I want to use the arrow as my logo in the header. When I implement this code into the header, it renders at the very bottom of the page, no matter what.</p>
  <p>I have tried different css classes to just try to move the canvas but nothing seems to work. I also tried to hard code the canvas where i want it to be but does not work like that.</p>
  <p>Any help for this newbie, please? :)</p>
  <p>Thanks in advance!</p>
  <pre><code>var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = 100;
  canvas.height = 100;
  
  
  document.body.appendChild(canvas);
  var renderSaveCount = 0; // Counts the number of mouse events that we did not have to render the whole scene
  
  var arrow = {
      x : 40,
      y : 40,
      image : new Image()
  };
  var mouse = {
      x : null,
      y : null,
      changed : false,
      changeCount : 0,
  }
  
  
  arrow.image.src = 'http://www.jeroenmigneaux.com/Untitled-2.png';
  
  function drawImageLookat(img, x, y, lookx, looky){
       ctx.setTransform(1, 0, 0, 1, x, y);
       ctx.rotate(Math.atan2(looky - y, lookx - x) - Math.PI / 2); // Adjust image 90 degree anti clockwise (PI/2) because the image  is pointing in the wrong direction.
       ctx.drawImage(img, -img.width / 2, -img.height / 2);
       ctx.setTransform(1, 0, 0, 1, 0, 0); // restore default not needed if you use setTransform for other rendering operations
  }
  function drawCrossHair(x,y,color){
      ctx.strokeStyle = color;
      ctx.beginPath();
      ctx.moveTo(x - 10, y);
      ctx.lineTo(x + 10, y);
      ctx.moveTo(x, y - 10);
      ctx.lineTo(x, y + 10);
      ctx.stroke();
  }
  
  function mouseEvent(e) {  // get the mouse coordinates relative to the canvas top left
      var bounds = canvas.getBoundingClientRect(); 
      mouse.x = e.pageX - bounds.left;
      mouse.y = e.pageY - bounds.top;
      mouse.cx = e.clientX - bounds.left; // to compare the difference between client and page coordinates
      mouse.cy = e.clienY - bounds.top;
      mouse.changed = true;
      mouse.changeCount += 1;
  }
  document.addEventListener(&quot;mousemove&quot;,mouseEvent);
  var renderTimeTotal = 0;
  var renderCount = 0;
  ctx.font = &quot;18px arial&quot;;
  ctx.lineWidth = 1;
  // only render when the DOM is ready to display the mouse position
  function update(){
      if(arrow.image.complete &amp;&amp; mouse.changed){ // only render when image ready and mouse moved
          var now = performance.now();
          mouse.changed = false; // flag that the mouse coords have been rendered
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          // get mouse canvas coordinate correcting for page scroll
          var x = mouse.x - scrollX;
          var y = mouse.y - scrollY;
          drawImageLookat(arrow.image, arrow.x, arrow.y, x ,y);
  
          // draw mouse event client coordinates on canvas
          drawCrossHair(mouse.cx,mouse.cy,&quot;rgba(255,100,100,0.2)&quot;);
  
  
  
      }
      requestAnimationFrame(update);
  
  }
  requestAnimationFrame(update);
  </code></pre>