Can't draw on my HTML5 canvas

Question

I have my canvas created but cannot draw a line on it. This is what I have written in JavaScript. Everything works but the line won't show.

<canvas id="gameCanvas" width="600" height="600"> 
    Sorry, your browser does not support the canvas tag.
</canvas>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script language="javascript" type="text/javascript">
    var c = document.getElementById("gameCanvas");
    var ctx = c.getContext("2d);
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
    ctx.beginPath();
    ctx.moveTo(0, 100);
    ctx.lineTo(600,100);
    ctx.stroke();
</script>

What does JavaScript console tell you? Do you have any errors there? — jsalonen, Jun 03 '14 at 21:17
Not sure if this is just in your example above or in the actual code, but typo in `var ctx = c.getContext("2d);` (missing closing "). Seems to work if you fix that http://jsfiddle.net/j08691/xS8CB/ — j08691, Jun 03 '14 at 21:18

score 2 · Accepted Answer · edited May 23 '17 at 10:26

2

When I open JavaScript console your script shows this error:

SyntaxError: unterminated string literal
var ctx = c.getContext("2d);

Can you spot the missing "? :)

In general, I would encourage you to regularly use a good JavaScript debugging / development tool like Chrome devtools or Firebug.

edited May 23 '17 at 10:26

Community

1
1

answered Jun 03 '14 at 21:18

jsalonen

29,593
15
91
109

Questions with typos as the answer should be flagged as such. Don't rep farm for points. – j08691 Jun 03 '14 at 21:21
@j08691 Fair point. I'm hesitant to consider this a typo-only problem, since the root cause of the trouble itself was the failure to debug JavaScript application correctly. If you can point me to some good Stackoverflow guide / meta resources which would back up closing opinion, I'm happy to join the close vote. – jsalonen Jun 03 '14 at 21:31
Personally I view the answering process in stackoverflow as follows: 1) A user comes with a problem posed as a Question, 2) Solutions to the question are formulated in a process which may involve further refining/editing the original question, 3) If everything goes well, the user gets a solution to his problem (and is encouraged to flag a preferred answer), 4) If a community finds a particular question/answer useful in more general sense, it gets upvoted and if highly common then gets marked as community wiki. – jsalonen Jun 03 '14 at 21:41
1

I tend to think its important to give answers even if they are highly subjective, since every positive experience of using SO to solve problems feeds in with potential future use of the site. Aggressive close/down-voting will IMHO just discourage timid users from asking in the first place. The problem for me with closing/down-voting is not in the act itself, but in the fact that by doing so we do not have a formal way to verify whether a user has got a specific problem solved. In comparison when user chooses "a preferred answer", I can see that he acknowledges the problem as solved. – jsalonen Jun 03 '14 at 21:47
But as said, I'm happy to further discuss this on meta and, given the relevant resources, change my opinion. – jsalonen Jun 03 '14 at 21:48

score 0 · Answer 2 · answered Jun 03 '14 at 21:19

Just a couple of minor errors (missing quotes):

<canvas id="gameCanvas" width="600" height="600" style="border:1px solid #000000"> 
        Sorry, your browser does not support the canvas tag.
</canvas>

<script type="text/javascript">
  var c = document.getElementById("gameCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#FF0000";
  //ctx.fillRect(0,0,150,75);
  ctx.beginPath();
  ctx.moveTo(0, 100);
  ctx.lineTo(600,100);
  ctx.stroke();



</script>

Can't draw on my HTML5 canvas

2 Answers2