Можно ли управлять изображением (паттерном) canvas?

Question

[dk-web]

Вот набросал пример. jsfiddle.net/kw4aqpz1/2
Есть png-ка с прозрачным слоем. Ее нужно залить другим изображением.
Сделал на обычных div-ах с ресайзом, драгом, z-index и т.д. Но кондовенько получилось.

Вот решил посмотреть, что такое canvas. Залить получилось, но можно ли им управлять? Понимаю, что скорее нет - ведь это "заливка". Но может есть иной способ совместить 2 изображения в таком ключе, чтобы накладываемое изображение можно было ресайзить, зумить, в общем подогнать.

Answer 1

[Павло Пономаренко]

CanvasPattern можно ресайзить, крутить и двигать при помощи setTransform

Upd: А вообще я нагуглил другой вариант: сначала инициируете фигуру, которую хотите заливать, а потом двигаете через translate. Подозреваю, что rotate и scale тоже сработают.

ctx.fillStyle = somePattern;
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 180);

ctx.save();
ctx.translate(offset, offset);
ctx.stroke();
ctx.restore();

Comments

[dk-web]

Спасибо, сейчас покручу

[Павло Пономаренко]

dk-web, и как? Покрутили?

[dk-web]

Павло Пономаренко, частично получилось через settransform. Второй вариант пока не сработал. Но 39 температура срубила( оклемаюсь продолжу