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

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

2 Answers 2

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.