CODEWITHSUNDEEP
javascripthtmlcanvaskineticjs
CaffeineAddiction
CaffeineAddiction

Reputation: 823

Kineticjs alpha mask

With HTML5 <canvas> elements, it is possible to use one canvas to mask another. For example, the following code will take the top canvas, use the alpha of the middle canvas and dump the result to the bottom canvas:

html:

<body style="background-color:#333;">
<img id="SourceImage" src="Src.png" style="display:none">
<img id="MaskImage" src="Mask.png" style="display:none">
<div><canvas id="cSrc"></canvas></div>
<div><canvas id="cMask"></canvas></div>
<div><canvas id="cDest"></canvas></div>

javascript:

var objSrc = document.getElementById('cSrc').getContext('2d');
var objMask = document.getElementById('cMask').getContext('2d');
var objDest = document.getElementById('cDest').getContext('2d');

objSrc.drawImage(document.getElementById("SourceImage"),0,0);
objMask.drawImage(document.getElementById("MaskImage"),0,0);

var imgs = objSrc.getImageData(0, 0, 300, 150);
var imga = objMask.getImageData(0, 0, 300, 150);
var pix = imgs.data;
var pixa = imga.data;

for (var i = 0, n = pix.length; i < n; i += 4) {
    pix[i+3] = pixa[i+3];
}

objDest.putImageData(imgs, 0, 0);

Result:

canvas mask result

How would I go about doing the same thing in Kineticjs? For instance, is there any way to to use one Kinetic.Layer as a mask for another Kinetic.Layer and then dump the results to a visible Kinetic.Layer? I looked at the clip(clip) method, but it seems to be more for cutting rectangular holes in a canvas (possible for cropping?).

Thoughts?

Upvotes: 0

Views: 220

Answers (1)

markE
markE

Reputation: 105015

Use offscreen html canvas(s) to do you alpha blending (as you've done above).

Then use your #objDest as the source for a Kinetic.Image.

var image1=new Kinetic.Image({
    image:objDest,
    ...
});

Upvotes: 1

Related Questions