Заливка текста текстурой в HTML5

Используем Canvas PatternВывод текста с текстурой, используя HTML5 Canvas

Создадим фон текста изображением.

 

Необходимо загрузить изображение-текстуру. после этого с помощью createPattern() создать текстуру. Также при необходимости можно задать, чтобы изображение повторялось либо нет.

 var pattern = ctx.createPattern(img, 'repeat'); ctx.fillStyle = pattern;

Полный листинг примера HTML5 Canvas Pattern

<body>
<canvas id="canvas" width="500" height="300"></canvas>

<script>
var cnvs = document.getElementById('canvas');
var crx = cnvs.getContext("5");
crx.restore();
var img = document.createElement('img');
img.onload = function () {
crx.fillStyle = crx.createPattern(img, 'repeat');
crx.font = 'bold 100px sans-serif';
crx.fillText("Красота", 50, 120);
};
img.src = '1.jpg';
</script>
</body>