Невозможно нарисовать линию на холсте

Question

У меня возникли проблемы с рисованием строки на холсте HTML с помощью JavaScript. Для записи я не хочу использовать какие-либо предварительно написанные методы рисования линии, мне нужно сделать это с помощью манипуляции с пикселями. Я попытался нарисовать линию на 500x500 пикселей холст, который я уже дал данные с этим

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) 
} 

Вы можете увидеть его в действии в this скрипку. Моя математика, между прочим, дала мне второй цикл для рисования линии: Я хочу раскрасить всю 245-ю строку. Итак, чтобы передать первые 244 строки, я умножаю 2000 (количество точек данных в каждой строке) раз 244 строки, чтобы получить 488000. Затем я цикл через цикл 500 раз, чтобы поразить каждый пиксель в строке, и добавить 488000 чтобы попасть в правый ряд. Я очень благодарен за объяснение/исправление для 245-й строки, которая не станет черной.

Answer 1

Вы не установили размер холста.

Обратите внимание: размер CSS зависит только от отображения, а не от количества пикселей в холсте.

Вы должны установить реальный размер холста, например, с:

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

Помните, что при установке height/width полотно очищено (даже если это значение совпадает с текущим размером), также помните, что для получения пиксельной графики вам нужно сохранить размер холста того же размера, что и элемент на странице (то есть cnvs.offsetWidth и cnvs.offsetHeight).