Холст globalAlpha не влияет на изображения?

Question

Я пытаюсь поместить серию изображений на холст с помощью метода putImageData (), но свойство globalAlpha контекста, похоже, не дает эффекта. Тем не менее, он работает с drawImage (). Это так должно работать?

Этот фрагмент не работает:

cx.globalAlpha = 0.1;
cx.putImageData(imagesData[index], 0, 0);

Answer 1

Нет, putImageData помещает чистые, нетронутые пиксели из imageData, перезаписывая любой пиксель, который там был.

Из спецификации:

Текущий путь, матрица преобразования, атрибуты тени, глобальная альфа, область отсечения и глобальный оператор композиции не должны влиять на методы getImageData() и putImageData().

Answer 2

Вы можете сделать изображение узором, нарисовать контур и заполнить его.

var img=document.getElementById("myImg")
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var pat=ctx.createPattern(img,'repeat');

ctx.globalAlpha=0.2;

ctx.fillStyle=pat;
ctx.beginPath(); ctx.rect(0,0,175,150); ctx.fill(); ctx.closePath();

ctx.globalAlpha=0.9;

ctx.beginPath(); ctx.rect(50,50,75,50); ctx.fill(); ctx.closePath();