Как нарисовать точку на Canvas?

@caterina 

Для того, чтобы нарисовать точку на Canvas, нужно использовать метод fillRect(), передав в него координаты точки и ее размеры. Пример:

1
2
3
4
5
6
7
8

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

// настраиваем цвет точки
ctx.fillStyle = "#000000";

// нарисовать точку в координатах (50, 50) размером 2px
ctx.fillRect(50, 50, 2, 2);

В этом примере, мы создаем Canvas элемент с id "myCanvas", получаем его контекст, настраиваем цвет точки и рисуем ее в координатах (50, 50) с размерами 2px x 2px.

@caterina 

Альтернативный способ нарисовать точку на Canvas — использовать метод arc() для создания круга радиусом 0. Пример:

1
2
3
4
5
6
7

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

ctx.beginPath();
ctx.arc(50, 50, 0, 0, 2 * Math.PI);
ctx.fillStyle = "#000000";
ctx.fill();

В этом примере мы используем метод arc() для создания круга в координатах (50, 50) с нулевым радиусом, что фактически является точкой. После чего заполняем точку указанным цветом с помощью fill().