title: Javascript on html Canvas element problem
body: <p>So I'm trying to create a method where the you move an image around a canvas element.  This is relevant in that in creating many kinds of games, you'd need a background image to move around properly against the canvas and the player's movement.  The problem is that you always draw relative to the canvas's (0,0) point in the top left corner.  So what I'm going for in a conceptualization where pressing right (for example) would be conceived as moving the CANVAS right, when really you're moving the image left.  It could be argued that this is unnecessary, but honestly thinking about it the other way kind of gives me a headache.  I think this way of relating everything to a larger absolute field would be easier to program with a large number of objects.</p>
  
  <p>The problem is, I've messed around with my code in Pycharm but I keep getting canvas not defined and similar errors.  Please help me fix this up!  So without further ado, here's my code! (and any other ways to clean up my code is appreciated, I'm pretty new to JS!)</p>
  
  <pre><code>//Animates a moving black dot on the canvas.
  
  //Variables for parameters
  var gameloopId;
  var speed=6;
  var canvas;
  var background;
  var circle;
  var ctx;
  
  //Wait for document to be ready then start
  $(document).ready(function(){
      console.log('document is ready');
      init();
  
  });
  
  //Holds the relative coordinates.
  function Canvas(){
      this.x=0;//relative X
      this.y=0;//relative Y
      //Calulate screen height and width
      this.width = parseInt($("#canvas").attr("width"));
      this.height = parseInt($("#canvas").attr("height"));
  }
  canvas=new Canvas();
  
  //Define an object
  function Object(){
      this.absX=0;
      this.absY=0;
      this.x=this.absX-canvas.x;
      this.y=this.absY-canvas.y;
  }
  
  //Circle Object
  function Circle(radius){
      this.radius=radius;
  }
  Circle.prototype= new Object(); //Circle is an Object
  function drawCircle(){
          // Create the circle
          ctx.strokeStyle = "#000000";
          ctx.fillStyle = "#000000";
          ctx.beginPath();
          ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI*2,true);
          ctx.closePath();
          ctx.stroke();
          ctx.fill();
      }
  Background= Image();
  Background.prototype=new Object(); //Background is an Object
  background= new Background()
  
  function drawBackground(){
          //draw the background
          ctx.drawImage(background,background.x,background.y);
      }
  
  function init(){
      console.log('function init()');
      initSettings();
  
  
      //Insert event handler for keyboard movement of circle (space clearInterval)
      $(document).keydown(function(e){
  
          if(e.keyCode=='37'){    //Left key
              circle.absX+=speed;
              canvas.x+=speed;}
  
          if(e.keyCode=='38'){    //Up key
              circle.absY-=speed;
              canvas.y-=speed;}
  
          if(e.keyCode=='39'){    //Right key
              circle.absX+=speed;
              canvas.x+=speed;}
  
          if(e.keyCode=='40'){    //Down key
              circle.absX+=speed;
              canvas.y+=speed;}
  
          if(e.keyCode=='32'){    //Space Bar
              console.log('spacebar');
              clearInterval(gameloopId);
              initSettings();
              gameloopId = setInterval(gameLoop,10);
          }
      });
  
      $(document).keyup(function(e){
  
          if(e.keyCode=='37'){
          console.log('left');}//Left key
  
          if(e.keyCode=='38'){
          console.log('up');}//Up key
  
          if(e.keyCode=='39'){
          console.log('right');}//Right key
  
          if(e.keyCode=='40'){
          console.log('down');}//Down key
      });
  
      //Initialize loop of "game"
      gameloopId = setInterval(gameLoop,10);
  }
  
  function initSettings(){
      console.log('initSettings');
  
      //Set up canvas
      ctx = document.getElementById('canvas').getContext('2d');
  
      //center circle on the horizontal axis
      console.log('setting circle coords');
      circle = new Circle(15);
      circle.x = parseInt(canvas.width/2);
      circle.y = canvas.height - 40;
  
      //Put background at (0,0)
      background.x=0;
      background.y=0;
      background.src="http://127.0.0.1:8000/static/back.jpg";
      console.log("background width:"+background.width);
      console.log("background height:"+background.height);
  }
  
  function gameLoop(){
      //console.log('function gameLoop()');
  
      //Has it reached far left side?
      if(circle.x&lt;circle.radius)
      {
          circle.x=circle.radius
      }
  
      //Has it reached far right side?
      if(circle.x&gt;canvas.width - circle.radius)
      {
          circle.x=canvas.width - circle.radius
      }
  
      //Has it reached top?
      if(circle.y&lt;circle.radius)
      {
          circle.y=circle.radius
      }
  
      //has it reached bottom?
      if(circle.y&gt;canvas.height - circle.radius)
      {
          circle.y=canvas.height - circle.radius
      }
  
      //has background reached left?
      if(background.x &lt; canvas.width-background.width)
      {
          background.x= canvas.width-background.width;
      }
  
      //has background reached right?
      if(background.x&gt;0)
      {
          background.x=0;
      }
  
      //has background reached top?
      if(background.y &lt; canvas.height-background.height)
      {
          background.y = canvas.height-background.height;
      }
  
      //has background reached bottom?
      if(background.y&gt;0)
      {
          background.y=0;
      }
  
      //Clear the screen (i.e. a draw a clear rectangle the size of the screen)
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.save();
  
      //draw background
      drawBackground();
      // draw the circle
      drawCircle();
  
  
      ctx.restore();
  
  }
  </code></pre>
  
  <p>EDIT:(UPDATED CODE!)</p>
  
  <pre><code>//Animates a moving black dot on the canvas.
  
  //Variables for parameters
  var gameloopId;
  var speed=6;
  var canvas;
  var background;
  var circle;
  var ctx;
  
  //Wait for document to be ready then start
  $(document).ready(function(){
      console.log('document is ready');
      init();
  
  });
  
  //Holds the relative coordinates.
  function Canvas(){
      this.x=0;//relative X
      this.y=0;//relative Y
      //Calulate screen height and width
      this.width = parseInt($("#canvas").attr("width"));
      this.height = parseInt($("#canvas").attr("height"));
  }
  
  //Define an object
  function MyObject(){
      this.absX=0;
      this.absY=0;
      this.x=this.absX-canvas.x;
      this.y=this.absY-canvas.y;
  }
  
  //Circle MyObject
  function Circle(radius){
      this.radius=radius;
  }
  Circle.prototype= new MyObject(); //Circle is an MyObject
  function drawCircle(){
          // Create the circle
          ctx.strokeStyle = "#000000";
          ctx.fillStyle = "#000000";
          ctx.beginPath();
          ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI*2,true);
          ctx.closePath();
          ctx.stroke();
          ctx.fill();
      }
  function Background(){
      this.img= Image();
  }
  Background.prototype=new MyObject(); //Background is an MyObject
  
  function drawBackground(){
          //draw the background
          ctx.drawImage(background,background.x,background.y);
      }
  
  function init(){
      console.log('function init()');
      initSettings();
  
  
      //Insert event handler for keyboard movement of circle (space clearInterval)
      $(document).keydown(function(e){
  
          if(e.keyCode=='37'){    //Left key
              circle.absX+=speed;
              canvas.x+=speed;}
  
          if(e.keyCode=='38'){    //Up key
              circle.absY-=speed;
              canvas.y-=speed;}
  
          if(e.keyCode=='39'){    //Right key
              circle.absX+=speed;
              canvas.x+=speed;}
  
          if(e.keyCode=='40'){    //Down key
              circle.absX+=speed;
              canvas.y+=speed;}
  
          if(e.keyCode=='32'){    //Space Bar
              console.log('spacebar');
              clearInterval(gameloopId);
              initSettings();
              gameloopId = setInterval(gameLoop,10);
          }
      });
  
      $(document).keyup(function(e){
  
          if(e.keyCode=='37'){
          console.log('left');}//Left key
  
          if(e.keyCode=='38'){
          console.log('up');}//Up key
  
          if(e.keyCode=='39'){
          console.log('right');}//Right key
  
          if(e.keyCode=='40'){
          console.log('down');}//Down key
      });
  
      //Initialize loop of "game"
      gameloopId = setInterval(gameLoop,10);
  }
  
  function initSettings(){
      console.log('initSettings');
  
      //Set up canvas
      canvas=new Canvas();
      ctx = document.getElementById('canvas').getContext('2d');
  
      //center circle on the horizontal axis
      console.log('setting circle coords');
      circle = new Circle(15);
      circle.x = parseInt(canvas.width/2);
      circle.y = canvas.height - 40;
  
      //Put background at (0,0)
      background= new Background();
      background.x=0;
      background.y=0;
      background.img.src="http://127.0.0.1:8000/static/back.jpg";
      console.log("background width:"+background.width);
      console.log("background height:"+background.height);
  }
  
  function gameLoop(){
      //console.log('function gameLoop()');
  
      //Has it reached far left side?
      if(circle.x&lt;circle.radius)
      {
          circle.x=circle.radius
      }
  
      //Has it reached far right side?
      if(circle.x&gt;canvas.width - circle.radius)
      {
          circle.x=canvas.width - circle.radius
      }
  
      //Has it reached top?
      if(circle.y&lt;circle.radius)
      {
          circle.y=circle.radius
      }
  
      //has it reached bottom?
      if(circle.y&gt;canvas.height - circle.radius)
      {
          circle.y=canvas.height - circle.radius
      }
  
      //has background reached left?
      if(background.x &lt; canvas.width-background.width)
      {
          background.x= canvas.width-background.width;
      }
  
      //has background reached right?
      if(background.x&gt;0)
      {
          background.x=0;
      }
  
      //has background reached top?
      if(background.y &lt; canvas.height-background.height)
      {
          background.y = canvas.height-background.height;
      }
  
      //has background reached bottom?
      if(background.y&gt;0)
      {
          background.y=0;
      }
  
      //Clear the screen (i.e. a draw a clear rectangle the size of the screen)
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.save();
  
      //draw background
      drawBackground();
      // draw the circle
      drawCircle();
  
  
      ctx.restore();
  
  }
  
  
  
  enter code here
  </code></pre>