Can't draw a line on the canvas

Question

I am having trouble drawing a line on the HTML canvas with JavaScript. For the record, I don't want to use any pre-written line-drawing methods, I need to do it using pixel manipulation. I tried drawing a line on a 500x500 pixel canvas that I already gave data with this

function drawBackgtoundAndLine()
{
    var cnvs = document.getElementById("cnvs");
    var cont = cnvs.getContext("2d")
    var imdt = cont.getImageData(0,0,500,500)
    //Fill canvas with a color
    for ( var i = 0 ; i < imdt.data.length ; i = i + 4)
    {
        imdt.data[i]   = 200;
        imdt.data[i+1] = 100;
        imdt.data[i+2] = 0;
        imdt.data[i+3] = 255;
    }
    //Draw a horizontal line
    var index = 0;
    for ( var c = 0 ; c < 500 ; c++)
    {
        index = (4*c)+488000;
        imdt.data[index]   = 0;
        imdt.data[index+1] = 0;
        imdt.data[index+2] = 0;
        imdt.data[index+3] = 255;
     }
     cont.putImageData( imdt , 0 , 0 )
}

You can see it in action in this fiddle. My math, by the way, that gave me the second for loop to draw a line is: I want to color the whole 245th row. So, to pass over the first 244 rows, I multiply 2000(the number of data points in each row) times 244 rows to get 488000. Then I cycle through the loop 500 times to hit each pixel in the row, and add the 488000 to get to the right row. I'd really appreciate an explanation/fix for the 245th row not turning black.

Answer 1

You did not set the canvas size.

Note that the CSS size is only about display, not the number of pixels in the canvas.

You need to set the real canvas size for example with:

 cnvs.width = 500;
 cnvs.height = 500;

Remember that when you set the height / width the canvas is cleared (even if the value is the same as the current size), also remember that to get pixel-perfect graphics you need to keep the canvas size the same size as the element on the page (ie cnvs.offsetWidth and cnvs.offsetHeight ).