CODEWITHSUNDEEP
javascripthtmlcanvas
user994165
user994165

Reputation: 9502

HTML Canvas Won't Draw Line

I have the following code to draw a line, but it won't draw. I only see the canvas border. I don't see any errors in the console.

index.html:

<div id="chart_area">
     <canvas id="chart1" width="800" height="600"></canvas>
</div>
...
<script>
     processChart()
</script>

style.css:

#chart_area
 {
 text-align:center;
 color:red;

 } 

 #chart1
 {
 text-align:center;
 border:solid;
 color:blue;

 } 

#control_panel
 {
 text-align:center;
 color:red;
 float:right;
 clear:both;
 }

chart.js:

function processChart() {
        var b_canvas = document.getElementById("chart1");
        var b_context = b_canvas.getContext("2d");
            b_context.moveTo([0,0]);
            b_context.lineTo([300,300]);
            b_context.stroke()  
}

Upvotes: 2

Views: 1521

Answers (2)

Magnus Karlsson
Magnus Karlsson

Reputation: 3579

You should remove your '[' try this:

b_canvas = document.getElementById("chart1");
        var b_context = b_canvas.getContext("2d");
            b_context.moveTo(11,0);
            b_context.lineTo(200,300);
            b_context.stroke();

Upvotes: 1

Jacob Parker
Jacob Parker

Reputation: 2556

Those functions take two arguments, not an array. Also be sure to call beginPath prior to drawing paths, you'll get confused later if you dont :) Your code should be

b_context.beginPath();
b_context.moveTo(0, 0);
b_context.lineTo(300, 300);
b_context.stroke()

Some canvas tutorials:

  • MDN is always good.
  • This one from html5tutorial.info looks good and is focused on path drawing.

Upvotes: 2

Related Questions