0

So, I found an interesting pattern and I want to do an automated program for different numbers. In the program, you can input n and m, which aren't so important for now. The thing is, I cannot draw on the canvas. I am wondering what I'm doing wrong. This is the code:

<!DOCTYPE html>
<html>
  <head>
    <title>oof</title>
    <meta charset="UTF-8">
    <script>
  function lines(n, m) {
    var canvas = document.getElementById("theCanvas");
    var c = canvas.getContext("2d");
    
    var cy = n * m;
    var cx = 1;
    
    c.moveTo(cx, cy);
    c.lineTo(cx, cy + 5);
    c.stroke();
    
  }
        
    lines(1);
      </script>
    </head>
        
    <body>
        <canvas id="theCanvas" height="32767" width="32767" />

    </body>
</html>
Edit: By "cannot draw", I mean that the I get no output. For clarification, I run the command on console, so it isn't in the source code. Also, the console throws me this error: Uncaught TypeError: Cannot read property 'getContext' of null at lines (hmm.html:9) at hmm.html:20
alpkaan35
  • 23
  • 5
  • 1
    "cannot draw" means what? is there some error to be seen on the console? – Sirko Feb 28 '19 at 17:44
  • 5
    Put your script at the end of the `body` tag, _after_ the canvas element - does that help? It looks like you are trying to perform your drawing before the element exists – chazsolo Feb 28 '19 at 17:45
  • 2
    See the linked question's answers for the primary problem mentioned above (the canvas doesn't exist as of when you try to write to it). Secondary problems are that the canvas may be too big for your browser (my installation of Chrome didn't like it) and you're calling `lines` with only one argument, but it expects and uses two parameters, so `m` in `lines` is `undefined`. `1 * undefined` is `NaN` and it's all `NaN` from there. If you fix those three things, you get a line. – T.J. Crowder Feb 28 '19 at 17:47
  • @T.J.Crowder I forgot to edit the function call out, it doesn't exist in my code. – alpkaan35 Feb 28 '19 at 18:00
  • @alpkaan35 - If nothing calls `lines`, you won't see anything on the canvas at all...? – T.J. Crowder Feb 28 '19 at 18:07
  • @T.J.Crowder See my last edit on the OP – alpkaan35 Feb 28 '19 at 18:21
  • You can do that . But `c.moveTo(cx, cy); c.lineTo(cx, cy + 5); c.stroke();` gonna create a line of only 5 pixels vertically – MaximeB Feb 28 '19 at 18:24
  • @MaximeB - There's almost never any reason to do that. Just put the `script` tag at the end of the body, just before the closing `

    ` tag.

     – T.J. Crowder Feb 28 '19 at 18:37
  • 1
    @alpkaan35 - If you're getting that error in the console, then it's one of these things: 1. You're doing this in smth like jsFiddle, CodePen, etc. where the console you have open isn't in the same window as your page (b/c the page is in an iframe), or 2. The `id` values in the HTML and `getElementById` don't match (they do in the above). As you can see [here](https://plnkr.co/edit/QfKDLgJJ1B5jCja1qBGB?p=preview), though, as long as you call `lines` after the canvas exists, as long as you deal w/it being too big (see earlier comment), and you call `lines` with two (reasonable) args, it works. – T.J. Crowder Feb 28 '19 at 18:41

0 Answers0