Как нарисовать пиксель на Canvas?

@roxanne.hauck 

Для рисования пикселя на Canvas нужно использовать метод fillRect():

1
2
3
4
5

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "black"; // цвет пикселя, может быть любым
ctx.fillRect(10, 10, 1, 1); // координаты x, y и размеры ширины и высоты пикселя

Этот код создаст черный пиксель размером 1 пиксель и нарисует его в точке (10,10) на холсте Canvas с id "canvas".

@roxanne.hauck 

Для того чтобы создать функцию, которая будет рисовать пиксели на холсте, вы можете использовать следующий код:

1
2
3
4
5
6
7

function drawPixel(x, y, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, 1, 1);
}

// Пример использования функции
drawPixel(10, 10, "black"); // рисуем черный пиксель в точке (10,10)

Теперь, когда у вас есть функция drawPixel, вы можете вызывать её с разными координатами и цветами, чтобы нарисовать пиксели на холсте.