3. Малювання на канві дозволяє створювати складні кольори: градієнтні та графічні.

У лінійному градієнтному кольорі один колір плавно переходить у інший. Його створюють в три етапи:

- перший крок – виклик методу createLinearGradient – власне створення лінійного градієнтного кольору:

<контекст малювання>. createLinearGradient (<горизонтальна координата початкової точки>, <вертикальна координата початкової точки>, <горизонтальна координата кінцевої точки>, <вертикальна координата кінцевої точки>)

Метод повертає екземпляр об’єкта CanvasGradient.

- другий етап – розкладання так званих ключових точок градієнта (їх може бути скільки завгодно), ключову точку ставлять викликавши метод addColorStop об’єкта CanvasGradient.

<градієнт>.addColorStop (<положення ключової точки>,<колір>)

Перший параметр визначає відносне положення ключової точки відносно початку прямої градієнта. Метод addColorStop не повертає значення.

- третій етап – використання готового градієнта. Для цього екземпляр об’єкта CanvasGradient потрібно присвоїти властивості strokeStyle або fillStyle.

Радіальний градієнтний колір описується двома колами, колір розповсюджується між ними. Його теж створюють в три етапи:

- перший крок – виклик методу createRadialGradient – власне створення радіального градієнтного кольору:

<контекст малювання>. createRadialGradient (<горизонтальна координата центра внутрішнього кола>, <вертикальна координата центра внутрішнього кола>, <радіус внутрішнього кола>, <горизонтальна координата центра зовнішнього кола>, <вертикальна координата центра зовнішнього кола>, <радіус зовнішнього кола>)

Метод повертає екземпляр об’єкта CanvasGradient.

- другий етап – розкладання так званих ключових точок градієнта (їх може бути скільки завгодно), ключову точку ставлять викликавши метод addColorStop об’єкта CanvasGradient.

<градієнт>.addColorStop (<положення ключової точки>,<колір>)

Перший параметр визначає відносне положення ключової точки відносно точки на проміжку між внутрішнім і зовнішнім колами. Метод addColorStop не повертає значення.

- третій етап – використання готового градієнта виконується аналогічно як і для лінійного градієнта.

Графічний колір – звичайне графічне зображення, яким замальовують лінії і заливки.

Графічний колір теж створюють в три етапи:

- перший етап необхідний, якщо в якості кольору ми використовуємо вміст графічного файлу. Його потрібно завантажити за допомогою об’єкта браузера Image:

var imgSample = new Image ();

imgSample.src = "grafic_color.jpg";

- другий етап – створення графічного кольору методом createPattern:

<контекст малювання>. createPattern (<графічне зображення чи канва>, <режим повторення>)

Режим повторення задає тип повторення для тих зображень, розміри яких менші за заповнювану область:

• "repeat" – зображення буде повторюватися і по вертикалі, і по горизонталі;

• "repeat-x" – зображення буде повторюватися по горизонталі;

• "repeat-y" – зображення буде повторюватися по вертикалі;

• "no-repeat" – зображення не буде повторюватися.

- третій етап – використання – виконується так само як і в лінійному та радіальному градієнті.