4

I'm trying to put series of images on the canvas with putImageData(), but the globalAlpha property of the context doesn't seem to have an effect. However, it's working with drawImage(). Is that how it's supposed to work?

That snippet doesn't work:

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

2 Answers 2

1

No, putImageData places the pure, pristine pixels from the imageData, overwriting whatever pixel was there.

From the spec:

The current path, transformation matrix, shadow attributes, global alpha, the clipping region, and global composition operator must not affect the getImageData() and putImageData() methods.

0

You can make the image a pattern, draw a path and fill it.

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();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.