Рисуем в canvas

Чтобы что-то нарисовать в HTML элементе <canvas>, необходимо воспользоваться JavaScript:

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0,0,150,75);
</script>

Шаг 1: Найдем элемент <canvas>

Прежде всего мы должны найти нужный нам элемент <canvas>. Для этого используется метод HTML DOM getElementById():

var canvas = document.getElementById("myCanvas");

Шаг 2: Создадим рисующий объект

Во-вторых, нам нужно в элементе <canvas> создать рисующий объект. Метод getContext() позволяет создать нужный HTML объект со свойствами и методами для рисования:

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

Шаг 3: Рисуем нужную графику

И наконец, теперь мы можем что-то нарисовать.

Устанавливаем стиль заливки графического объекта в красный цвет:

ctx.fillStyle = "#FF0000";

Свойство fillStyle может принимать значение CSS цвета, градиента или шаблона (паттерна). По умолчанию свойству fillStyle установлен черный цвет.

Метод fillRect(x,y,width,height) рисует прямоугольник:

 ctx.fillRect(0,0,150,75);