I want to make a HTML select list, with which I can choose which type of globalCompositeOperation will be applied when blending two canvas elements, like this:
<select name="blending-modes" id="blending-modes">
<option value="source-over">source-over</option>
<option value="source-in">source-in</option>
<option value="source-out">source-out</option>
...
</select>
Is there a way to programatically get list of available globalCompositeOperation types as a Javascript object or array, so it could be used to populate select element with data, instead of filling it manually? Is this information stored in some native variable?
I do not want to just verify whether or not some blending mode is supported by user's browser, as discussed here. I want to get a full list of supported globalCompositeOperation types in order to chose blending mode in a browser.
No there is no native property telling us which are the globalCompositeOperation modes that the browser supports.
You'll have to test it by looping through all spec defined ones, and check if it is still the one you just set :
function getGCOModes() {
var gCO = ["clear", "copy", "source-over", "destination-over", "source-in", "destination-in", "source-out", "destination-out", "source-atop", "destination-atop", "xor", "lighter", "plus-darker", "plus-lighter", "normal", "multiply", "screen", "overlay", "darken", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity", "plus-lighter", "plus-darker"];
var ctx = document.createElement('canvas').getContext('2d');
return gCO.filter(function(g) {
ctx.globalCompositeOperation = g;
return ctx.globalCompositeOperation === g;
});
}
var supportedGCO = getGCOModes();
log.innerHTML = supportedGCO.join(' ');<p id="log"></p>But there is one caveat / bug because Safari (at least 9.0.1) does accept the "hue", "saturation", "color" and "luminosity"" modes, but doesn't actually support it...
So here I made a function to test the different modes.
The idea is to draw two 3x3px canvases filled with a solid color onto a third one. The first one is painted in the top-left corner and the second one in the bottom-left, each of them sharing a pixel in the central pixel of the third canvas.
Obviously this is slower than the property check, but you should only need it once per page so performance might not be an issue.
function testGCOModes() {
// In this object are stored the pixels as they should appear at the 3 positions we'll look :
// 0 is an empty pixel
// 1 is the first pixel drawn
// 2 is the second pixel drawn
// 3 is none of the above (blending)
// We'll look to the central pixel first since it is the most likely to change
var gCO = {
// composite modes
"clear": [0, 1, 0],
"copy": [2, 0, 2],
"source-over": [2, 1, 2],
"destination-over": [1, 1, 2],
"source-in": [2, 0, 0],
"destination-in": [1, 0, 0],
"source-out": [0, 0, 2],
"destination-out": [0, 1, 0],
"source-atop": [2, 1, 0],
"destination-atop": [1, 0, 2],
"xor": [0, 1, 2],
"lighter": [3, 1, 2],
"plus-darker": [3, 1, 2],
"plus-lighter": [3, 1, 2],
// blending modes
"normal": [2, 1, 2],
"multiply": [3, 1, 2],
"screen": [3, 1, 2],
"overlay": [3, 1, 2],
"darken": [1, 1, 2],
"color-dodge": [3, 1, 2],
"color-burn": [3, 1, 2],
"hard-light": [3, 1, 2],
"soft-light": [3, 1, 2],
"difference": [3, 1, 2],
"exclusion": [3, 1, 2],
"hue": [3, 1, 2],
"saturation": [3, 1, 2],
"color": [3, 1, 2],
"luminosity": [3, 1, 2]
};
// create two 3*3 canvases that will be used as layers
var c1 = document.createElement('canvas');
c1.width = c1.height = 3;
var c2 = c1.cloneNode(true),
// the third one will be the tester
c3 = c1.cloneNode(true),
ctx1 = c1.getContext('2d'),
ctx2 = c2.getContext('2d'),
ctx3 = c3.getContext('2d');
// fill our canvases with solid colors
ctx1.fillStyle = 'green';
ctx1.fillRect(0, 0, 3, 3);
ctx2.fillStyle = 'pink';
ctx2.fillRect(0, 0, 3, 3);
// get the image data of one pixel that will corresponds to the values in gCO's arrays
var em = [0, 0, 0, 0], // 0 or empty
d1 = ctx1.getImageData(0, 0, 1, 1).data, // 1
d2 = ctx2.getImageData(0, 0, 1, 1).data; // 2
// the positions of the pixels in our imageData
// again, start with the central one
var pos = [16, 0, 32];
// make an array of all our gCOs
var keys = Object.keys(gCO);
return keys.filter(function(g) {
var i;
// get the array corresponding to the actual key
var arr = gCO[g];
var layer = [];
// get the correct imageData for each layer we should find
for (i = 0; i < 3; i++) {
switch (arr[i]) {
case 0:
layer[i] = em;
break;
case 1:
layer[i] = d1;
break;
case 2:
layer[i] = d2;
break;
case 3:
layer[i] = null;
break;
}
}
// first reset the canvas
ctx3.globalCompositeOperation = 'source-over';
ctx3.clearRect(0, 0, 3, 3);
// draw the first layer in the top-left corner
ctx3.drawImage(c1, -1, -1);
// set the current gCO
ctx3.globalCompositeOperation = g;
// first check the enum is recognized
if (ctx3.globalCompositeOperation !== g) {
return false;
}
// draw the second layer in the top-right corner so it comes over it
ctx3.drawImage(c2, 1, 1);
// get the image data of our test canvas
var d3 = ctx3.getImageData(0, 0, 3, 3).data;
// we will first admit that it is supported;
var tempResult = true;
// iterate through the 3 positions (center, top-left, bottom-right)
for (i = 0; i < pos.length; i++) {
// we know what it should return
if (layer[i] !== null) {
// is it the same pixel as expected ?
tempResult = d3[pos[i]] === layer[i][0] &&
d3[pos[i] + 1] === layer[i][1] &&
d3[pos[i] + 2] === layer[i][2] &&
d3[pos[i] + 3] === layer[i][3];
}
// some blending operation
else {
// is it different than the last drawn layer ?
//(if the mode is not supported, the default gCO "source-over" will be used)
tempResult = d3[pos[i]] !== d2[0] || d3[pos[i] + 1] !== d2[1] || d3[pos[i] + 2] !== d2[2] || d3[pos[i] + 3] !== d2[3];
}
// our flag switched to false
if (!tempResult)
// no need to go to the other pixels, it's not supported
return false;
}
// this mode is supported
return true;
});
}
var supportedGCO = testGCOModes();
log.innerHTML = supportedGCO.join(' ');<p id="log"></p>