javascript - HTML5 Canvas lines not drawing - Stack Overflow

admin管理员组

文章数量:1022989

As the question suggests, I am trying to draw a line on a HTML5 canvas. I have tested the values and find that it WILL draw a line from 0,0 to 1920,1040 (the size of the client area) but will not for any other values entered. I'm pretty sure that it will be a simple mistake, but I have yet to spot it and really need to move on. Thank you for your help!

Here's the code:

        function DrawGrid() {
        var canvas = document.getElementById("Grid");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(872, 432);
        context.lineTo(1048, 432);
        context.strokeStyle = "#FF0000";
        context.lineWidth = 1;
        context.stroke();
        context.closePath();
    }

As the question suggests, I am trying to draw a line on a HTML5 canvas. I have tested the values and find that it WILL draw a line from 0,0 to 1920,1040 (the size of the client area) but will not for any other values entered. I'm pretty sure that it will be a simple mistake, but I have yet to spot it and really need to move on. Thank you for your help!

Here's the code:

        function DrawGrid() {
        var canvas = document.getElementById("Grid");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(872, 432);
        context.lineTo(1048, 432);
        context.strokeStyle = "#FF0000";
        context.lineWidth = 1;
        context.stroke();
        context.closePath();
    }

• javascript
• html
• canvas

Share Improve this question Follow edited Sep 25, 2013 at 15:08 JamesT asked Sep 25, 2013 at 14:35 JamesTJamesT 4722 silver badges99 bronze badges 1

• Where are CenterX and CenterY defined? – Matthew Burke Commented Sep 25, 2013 at 14:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

There must be something wrong with your LineStartX and LineStartY variables (Unable to test because you haven't provided CenterX and CenterY), replacing them with hard coded integers seems to work.

DrawGrid();

function DrawGrid() {
   var canvas = document.getElementById("Grid");
   var context = canvas.getContext("2d");

    //var LineStartX = CenterX - (width / 2);
   // var LineStartY = CenterY - (height / 2);

    context.beginPath();
    context.moveTo(10, 20);
    context.lineTo(100, 20);
    context.strokeStyle = "#FFAACC";
    context.lineWidth = 1;
    context.stroke();
}

http://jsfiddle/4Mf8C/

I discovered the problem was caused by where I was calling the function.

As the question suggests, I am trying to draw a line on a HTML5 canvas. I have tested the values and find that it WILL draw a line from 0,0 to 1920,1040 (the size of the client area) but will not for any other values entered. I'm pretty sure that it will be a simple mistake, but I have yet to spot it and really need to move on. Thank you for your help!

Here's the code:

        function DrawGrid() {
        var canvas = document.getElementById("Grid");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(872, 432);
        context.lineTo(1048, 432);
        context.strokeStyle = "#FF0000";
        context.lineWidth = 1;
        context.stroke();
        context.closePath();
    }

As the question suggests, I am trying to draw a line on a HTML5 canvas. I have tested the values and find that it WILL draw a line from 0,0 to 1920,1040 (the size of the client area) but will not for any other values entered. I'm pretty sure that it will be a simple mistake, but I have yet to spot it and really need to move on. Thank you for your help!

Here's the code:

        function DrawGrid() {
        var canvas = document.getElementById("Grid");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(872, 432);
        context.lineTo(1048, 432);
        context.strokeStyle = "#FF0000";
        context.lineWidth = 1;
        context.stroke();
        context.closePath();
    }

• javascript
• html
• canvas

Share Improve this question Follow edited Sep 25, 2013 at 15:08 JamesT asked Sep 25, 2013 at 14:35 JamesTJamesT 4722 silver badges99 bronze badges 1

• Where are CenterX and CenterY defined? – Matthew Burke Commented Sep 25, 2013 at 14:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

There must be something wrong with your LineStartX and LineStartY variables (Unable to test because you haven't provided CenterX and CenterY), replacing them with hard coded integers seems to work.

DrawGrid();

function DrawGrid() {
   var canvas = document.getElementById("Grid");
   var context = canvas.getContext("2d");

    //var LineStartX = CenterX - (width / 2);
   // var LineStartY = CenterY - (height / 2);

    context.beginPath();
    context.moveTo(10, 20);
    context.lineTo(100, 20);
    context.strokeStyle = "#FFAACC";
    context.lineWidth = 1;
    context.stroke();
}

http://jsfiddle/4Mf8C/

I discovered the problem was caused by where I was calling the function.

本文标签： javascriptHTML5 Canvas lines not drawingStack Overflow