Как всегда доктайп и хэд страници:
<!DOCTYPE html>
<html>
<head>
<title>pattern fill with an image | how2.org.ua</title>
<style>
html,body { height: 100%;}
body { margin: 0; body: 0; overflow: hidden; }
#pattern { position: absolute; top: 0; left: 0; width: 100%; bottom: 0; height: 100%; }
</style>
</head>
Тело страници с canvas элементом:
<body>
<canvas id=»pattern»></canvas>
Скрипт для управления всем этим добром:
<script>
var canvas = document.querySelector(‘canvas’),
img = document.createElement(‘img’),
ctx = canvas.getContext ? canvas.getContext(‘2d’) : null;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
img.onload = function () {
ctx.fillStyle = ctx.createPattern(this, ‘repeat’);
ctx.fillRect(0, 0, canvas.width, canvas.height);
};
img.src = ‘logo.png’;
</script>
Первым делом как всегда создаём переменную canvas и ctx. Кроме того создаём изображение для создания эффекта замощения.
Указываем шириной и высотой canvas элемента — ширину и высоту окна.
Создаём функцию выполняемую при загрузке изображения img.
Внутри неё указываем стиль заполнения. При этом указываем, что «мостить» будем этим (this — ссылка на текущий класс) элементом и будем повторять (repeat). Это свойство повторяем свойство background-repeat из css.
После этого указываем, что рисовать будем в пределах 0,0,ширина,высота.
Покончив с этим указываем путь (src) к изображению.
Закрываем теги:
</body>
</html>
Наслаждаемся результатом.