colr-glyph-composition-ref.html

Enable keyboard shortcuts

<html>

<meta charset="utf-8">

<style>

canvas {

  margin: 5px;

</style>

<script>

src = document.createElement("canvas");

src.width = "100";

src.height = "100";

scx = src.getContext("2d");

scx.font = "64px Segoe UI Emoji, sans-serif";

scx.fillText("\u{1F63A}",5,65);

function test(op) {

  cv = document.createElement("canvas");

  cv.width = "100";

  cv.height = "100";

  document.body.appendChild(cv);

  cx = cv.getContext("2d");

  cx.fillStyle = "#888888";

  cx.fillRect(0,0,100,50);

  cx.globalCompositeOperation = op;

  cx.drawImage(src, 0, 0);

function br() {

  document.body.appendChild(document.createElement("br"));

window.onload = ( ) => {

  test("source-over");

  test("source-in");

  test("source-out");

  test("source-atop");

  br();

  test("destination-over");

  test("destination-in");

  test("destination-out");

  test("destination-atop");

  br();

  test("copy");

  test("lighter");

  test("xor");

  test("multiply");

  br();

  test("screen");

  test("overlay");

  test("darken");

  test("lighten");

  br();

  test("color-dodge");

  test("color-burn");

  test("hard-light");

  test("soft-light");

  br();

  test("difference");

  test("exclusion");

  test("hue");

  test("saturation");

  br();

  test("color");

  test("luminosity");

};

</script>

<body>

</body>

</html>