title: Attribute onclick="function()" not functioning as intended?
body: <p>Ive tried solving the problem, and i cant seem to find its solution. A few hours of fiddling around later, ive found out that the problem is within the button tag or the onclick attribute (Correct me if im wrong).</p>
  
  <p>My aim is to make the white dot move via buttons</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
          window.onload = function()
          {
              var canvas =        document.getElementById("canvas");
              var ctx = canvas.getContext("2d");
              canvas.width = 345;
              canvas.height = 410;
              canvas.style.border = "1px solid white";
  
              var left = document.getElementById("left");
              left.onclick = "playerLeft()";
  
              var x = Math.round(canvas.width/2);
              var y = Math.round(canvas.width/2);
              var rectWidth = 5, rectHeight = 5;
              var fps = 30, frames = 1000/fps;
              var colour = "white";
              var trailColour = "blue";
  
              ctx.fillStyle = colour;
              ctx.fillRect(x,y,rectWidth,rectHeight);
  
              function playerLeft() { 
                  ctx.fillStyle = trailColour;
                  ctx.fillRect(x,y,rectWidth,rectHeight);
                  x -= 6; 
                  ctx.fillStyle = colour;;
                  ctx.fillRect(x,y,rectWidth,rectHeight);
              }
              function playerRight() { 
                  ctx.fillStyle = trailColour;
                  ctx.fillRect(x,y,rectWidth,rectHeight);
                  x += 6; 
                  ctx.fillStyle = colour;
                  ctx.fillRect(x,y,rectWidth,rectHeight);
              }
              function playerUp() { 
                  ctx.fillStyle = trailColour;
                  ctx.fillRect(x,y,rectWidth,rectHeight);
                  y -= 6; 
                  ctx.fillStyle = colour;
                  ctx.fillRect(x,y,rectWidth,rectHeight);
              }
              function playerDown() { 
                  ctx.fillStyle = trailColour;
                  ctx.fillRect(x,y,rectWidth,rectHeight);
                  y += 6;
                  ctx.fillStyle = colour;
                  ctx.fillRect(x,y,rectWidth,rectHeight);
              }
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body style="background-color: black"&gt;
      &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  
      &lt;div style="text-align: center; padding: 5px"&gt;
          &lt;button id="left"&gt;Left&lt;/button&gt;
          &lt;button id="up"&gt;Up&lt;/button&gt;
          &lt;button id="down"&gt;Down&lt;/button&gt;
          &lt;button id="right"&gt;Right&lt;/button&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>