Градиент

Также ,как и в CSS3, градиенты могут быть линейными и радиальными. Возможно установление нескольких цветовых установок, создающих плавные переходы между множеством цветов. Методы:

• createLinearGradient(x1, y1, x2, y2) создает объект градиента для последующей визуализации на холсте.
• createRadialGradient(x1, y1, r1, x2, y2, r2) создает объект градиента, состоящий из двух окружностей. Значения в скобках представляют собой координаты центров окружностей и их радиусы.
• addColorStop(position, color) – определяет цвета, которые будут использоваться для создания градиента. Атрибут position — это значение от 0,0 до 1,0, определяющее, в какой позиции начинается затухание цвета color.

function initiate(){
  var elem = document.getElementById('canvas');
  var canvas = elem.getContext('2d');
  var grad = canvas.createLinearGradient(0, 0, 500, 500);
  grad.addColorStop(0.5, '#00AAFF');
  grad.addColorStop(1, '#000000');
  canvas.fillStyle = grad;
  canvas.fillRect(10, 10, 100, 100);
  canvas.fillRect(150, 10, 200, 100);
}
addEventListener("load", initiate);