scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-03 19:45:44 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve tests for native blend modes.

Browse source 
Each mode needs to be tested separately, since some browsers implement only a subset (WebKit).
This commit is contained in:
Jürg Lehni 2013-06-26 14:59:07 -07:00
parent b8d773e129
commit 1126c699d2
1 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/canvas/BlendMode.js
View file

@ -219,19 +219,28 @@ var BlendMode = new function() {
// if globalCompositeOperation is actually sticky is not enough, as Chome 27 // if globalCompositeOperation is actually sticky is not enough, as Chome 27
// pretends for blend-modes to work, but does not actually apply them. // pretends for blend-modes to work, but does not actually apply them.
var ctx = CanvasProvider.getContext(1, 1); var ctx = CanvasProvider.getContext(1, 1);
// Multiply #300 (51) and #a00 (170) and see if we get #200 (34) // Blend #330000 (51) and #aa0000 (170). Multiplying should lead to
ctx.fillStyle = '#300'; // #220000 (34)
ctx.fillRect(0, 0, 1, 1); function testMode(mode) {
ctx.globalCompositeOperation = 'multiply'; ctx.save();
ctx.fillStyle = '#a00'; // For darken we need to reverse color parameters in order to test mode.
ctx.fillRect(0, 0, 1, 1); var darken = mode === 'darken',
var data = ctx.getImageData(0, 0, 1, 1).data; ok = false;
// If data[0] is 34, the mode has worked. Now feature-detect all modes that ctx.fillStyle = darken ? '#300' : '#a00';
// the browser claims to support. ctx.fillRect(0, 0, 1, 1);
this.nativeModes = data[0] === 34 && Base.each(modes, function(func, mode) {
ctx.globalCompositeOperation = mode; ctx.globalCompositeOperation = mode;
this[mode] = ctx.globalCompositeOperation === mode; if (ctx.globalCompositeOperation === mode) {
}, {}); ctx.fillStyle = darken ? '#a00' : '#300';
ctx.fillRect(0, 0, 1, 1);
ok = ctx.getImageData(0, 0, 1, 1).data[0] !== darken ? 170 : 51;
}
ctx.restore();
return ok;
}
this.nativeModes = testMode('multiply') && Base.each(modes,
function(func, mode) {
this[mode] = testMode(mode);
}, {});
CanvasProvider.release(ctx); CanvasProvider.release(ctx);
this.process = function(mode, srcContext, dstContext, alpha, offset) { this.process = function(mode, srcContext, dstContext, alpha, offset) {