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.

I can't access the fiddle, can you update the link? – Tobias Beuving Nov 08 '15 at 22:58 — Tobias Beuving, Nov 08 '15 at 22:58
Cool! :) I was wondering what that was about, thanks @6502 – Tobias Beuving Nov 08 '15 at 23:36 — Tobias Beuving, Nov 08 '15 at 23:36

6502 · Accepted Answer · 2015-11-08T23:19:10.703

3

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 (i.e. cnvs.offsetWidth and cnvs.offsetHeight).

edited Nov 08 '15 at 23:19

answered Nov 08 '15 at 23:14

6502

112,025
15
165
265

Nicely spotted. Seems the default width/height when unspecified is 300x150 (on Chrome OSX at least) – Ben Nov 08 '15 at 23:18
1

@Ben: in basically all my canvas code the repaint routine always starts with `canvas.width = canvas.offsetWidth` and the same for height. Note however that retina displays broke this simplicity as sometimes a CSS pixel is not a real pixel... – 6502 Nov 08 '15 at 23:20
@6502 When would a CSS pixel not equal a real pixel, except maybe if you zoom out/in on the webpage? – Bill Bllson Nov 08 '15 at 23:30
When I do: index = (c*4)+(500*(244)); it works, but I am not sure why :) – Tobias Beuving Nov 08 '15 at 23:34
@BillBllson: respecting CSS pixel values with very high resolution displays would make most of the web pages out there unreadable because authors used pixel sizes for example for fonts working with say 90dpi monitors but everything is too tiny if you've a 300dpi screen. The hack was to just make every "CSS pixel" for example 4 real pixels of the device... i.e. asking for a 12pixel font in CSS really gives you a 24 pixel font instead. This trick works fine enough except if you want to do pixel-perfect graphic using canvas. – 6502 Nov 09 '15 at 07:49

Can't draw a line on the canvas

1 Answers1