Как сделать текстуру на Canvas?

@dayna 

1. Создайте canvas элемент на странице:

1

<canvas id="myCanvas"></canvas>

1. Получите контекст рисования:

1
2

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

1. Нарисуйте изображение или форму на canvas элементе:

1

ctx.fillRect(0, 0, canvas.width, canvas.height);

1. Создайте паттерн:

1

var pattern = ctx.createPattern(canvas, "repeat");

1. Нарисуйте текстуру с помощью функции fillStyle и паттерном, который вы создали:

1
2

ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 500, 500);

Пример создания текстуры на canvas: https://codepen.io/pen/?editors=1000

@dayna 

Для создания текстуры на Canvas необходимо выполнить следующие шаги:

1. Создание canvas элемента на странице:

1

<canvas id="myCanvas"></canvas>

1. Получение контекста рисования:

1
2

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

1. Нарисовать изображение или форму на canvas элементе (например, закрасить всю область canvas'а прямоугольником):

1

ctx.fillRect(0, 0, canvas.width, canvas.height);

1. Создание паттерна:

1

var pattern = ctx.createPattern(canvas, "repeat");

1. Нарисовать текстуру с помощью функции fillStyle и созданного паттерна:

1
2

ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 500, 500);

Вы можете также использовать другие методы рисования и шаблоны для создания различных текстур на Canvas.

Пример создания текстуры на Canvas в CodePen: здесь.