javascript - JS: How to get list of supported HTML canvas globalCompositeOperation types

Question

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.

Answer 1

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 = ["source-over", "source-in", "source-out", "source-atop", "destination-over", "destination-in", "destination-out", "destination-atop", "lighter", "copy", "xor", "multiply", "screen", "overlay", "darken", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
  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>