Узоры

Процедура добавления узоров аналогична работе с градиентами: нужно создать узор с помощью метода createPattern().

createPattern(image, type), где атрибут image предоставляет собой ссылку на изображение, а атрибут type может принимть одно из четырех значений: repeat, repeat-x, repeat-y или no-repeat.

var canvas, img;
function initiate(){
  var elem = document.getElementById('canvas');
  canvas = elem.getContext('2d');
  img = document.createElement('img');
  img.setAttribute('src', 'http://www.minkbooks.com/content/bricks.jpg');
  img.addEventListener("load", modimage);
}
function modimage(){
  var pattern = canvas.createPattern(img, 'repeat');
  canvas.fillStyle = pattern;
  canvas.fillRect(0, 0, 500, 300);
}
addEventListener("load", initiate);