TypeError: Cannot call method 'getContext' of null (anonymous function)

canvas, javascript, typeerror

Solution

Just correct it to the following:

<script type="text/javascript">
window.onLoad=function(){ init();};
  function init() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    return setInterval(draw, 10);
  }

  function draw() {
    clear();
    ctx.fillStyle = "#FAF7F8";
    rectangle(0,0,WIDTH,HEIGHT);
    ctx.fillStyle = "#444444";
    rectangle();
  }

  function myMove(e) {
    if (dragok) {
      x = e.pageX - canvas.offsetLeft;
      y = e.pageY - canvas.offsetTop;
    }
  }

  function myDown(e) {
    if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
        canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
        e.pageY > y -15 + canvas.offsetTop) {
      x = e.pageX - canvas.offsetLeft;
      y = e.pageY - canvas.offsetTop;
      dragok = true;
      canvas.onmousemove = myMove;
    }
  }

  function myUp() {
    dragok = false;
    canvas.onmousemove = null;
  }

  init();
  canvas.onmousedown = myDown;
  canvas.onmouseup = myUp;
</script>

This should work. The problem is canvas element need to be ready to run the script. Since the `<script>` in `<head>` section runs before loading the `<canvas>` it gives the error.

Problem

I'm a beginner at this and haven't really done any JavaScript before so I hope you can help me. I've made a canvas that lets the user choose a shape and a colour with radio buttons which is then drawn on to the canvas. I've also added a checkbox with an option of adding a gradient to the chosen colour. Here's the program: http://people.dsv.su.se/~caak1743/Canvas/canvas.html Now I wan't to make it so that the shapes can be dragged and dropped around the canvas area. And I've found a code that I think can be altered to work on my program but I keep getting: TypeError: Cannot call method 'getContext' of null init (anonymous function) for the line: ``` var ctx = canvas.getContext("2d"); ``` and I have no idea what is wrong or how I can solve it. I've tried looking for similar programs with similar problems but haven't found anything that I can apply here. Here's the code that I'm trying to incorporate with mine: ``` function init() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); return setInterval(draw, 10); } function draw() { clear(); ctx.fillStyle = "#FAF7F8"; rectangle(0,0,WIDTH,HEIGHT); ctx.fillStyle = "#444444"; rectangle(); } function myMove(e){ if (dragok){ x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; } } function myDown(e){ if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && e.pageY > y -15 + canvas.offsetTop){ x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; dragok = true; canvas.onmousemove = myMove; } } function myUp(){ dragok = false; canvas.onmousemove = null; } init(); canvas.onmousedown = myDown; canvas.onmouseup = myUp; ```

Original source