Canvas content is not showing

Question

Good day, I have a problem with the canvas. I'm using boostrap and I'd like to show some graphics. I have this:

<div id="charts" class="tab-pane fade">
  <div class="container-fluid-charts onload="init();">
    <div id="container1" style="width: 100%; height: 400px; margin: 0 auto;border: 1px solid black;background-color: white;"></div>
      <canvas id="chart1">Your browser cannot display the charts...</canvas>
  </div>
</div>

The Javascript is composed like this:

function init() {
    var c = document.getElementById("chart1");
    var ctx1 = c.getContext('2d');

    drawChart1();
}

function drawChart1() {
    ctx1.moveTo(ctx.canvas.width / 2 , 0);
    ctx1.lineTo(0, ctx.canvas.height);
    ctx1.stroke();

    ctx1.beginPath();
    ctx1.arc(95,50,40,0,2*Math.PI);
    ctx1.stroke();

    ctx1.font = "30px Arial";
    ctx1.fillText("Hello World",10,50);
}

I have no errors showing and the canvas is empty. I think it's related to the DOM... Anyone can help me please ?

le_m · Accepted Answer · 2017-05-24T19:02:34.740

4

You declare the local variable var ctx1 = ... within the context of the init() function. You cannot access it outside that function. Thus, accessing ctx1 within drawChart1() fails.
Also, within drawChart1(), you are accessing a ctx variable which hasn't been declared anywhere.
You are missing a quote closing the class="... attribute.
Also, the <div> element doesn't support the onload attribute: How to add onload event to a div element?

A better solution is to pass the context ctx as a parameter to the drawChart1(ctx) function. Placing your script below all relevant DOM elements makes the onload handler superfluous:

<div id="charts" class="tab-pane fade">
  <div class="container-fluid-charts">
    <div id="container1" style="width: 100%; height: 400px; margin: 0 auto;border: 1px solid black;background-color: white;"></div>
    <canvas id="chart1">Your browser cannot display the charts...</canvas>
  </div>
</div>
<script>
  function drawChart1(ctx) {
    ctx.moveTo(ctx.canvas.width / 2, 0);
    ctx.lineTo(0, ctx.canvas.height);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(95, 50, 40, 0, 2 * Math.PI);
    ctx.stroke();

    ctx.font = "30px Arial";
    ctx.fillText("Hello World", 10, 50);
  }


  var c = document.getElementById("chart1");
  var ctx = c.getContext('2d');

  drawChart1(ctx);
</script>

edited May 24 '17 at 19:02

answered May 24 '17 at 18:55

le_m

19,302
9
64
74

If I follow your example, I have an error "Uncaught TypeError: Cannot read property 'getContext' of null" – EricF May 24 '17 at 19:08
@EricF Did you change the canvas ID or declare the script before the canvas element? Does above snippet run fine? – le_m May 24 '17 at 19:16
The snippet works fine... I didn't change anything. That's why I was wondering if it was related to the DOM. Something like ctx.getElementById('container')[0]; or something like that... Not sure... – EricF May 24 '17 at 19:18
Sorry I cannot because of sensitive content... :( But the code I posted above is the original version. I'll find another way then. Thanks a lot for your help anyway ! I appreciate it. – EricF May 24 '17 at 19:24
@EricF `ctx.getElementById('container')[0];` <-- `ctx` doesn't have a getElementById method, only `document` has - and the return value is an individual element, not an array unless you call e.g. getElement**s**ByTagName. – le_m May 24 '17 at 19:27
Makes sense... I tried many options with no success... Oh well... Thank You again ! – EricF May 24 '17 at 19:32

Canvas content is not showing

1 Answers1