colrv1-05.html - mozsearch

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<meta charset=utf-8>

<title>COLRv1 font test: compositing operators</title>

<style>

@font-face {

  font-family: CAhem;

  src: url("CAhem.ttf");

.test { margin: 10px; padding: 10px; }

span { font: 100px/1 CAhem; }

</style>

<p>Some glyphs using PAINT_COMPOSITE:</p>

<div class="test">

<span>ghijkl</span>

</div>

<p>And painting them to a canvas element:</p>

<canvas id=c width=600 height=100></canvas>

<script>

document.fonts.load("100px CAhem").then(function () {

  ctx = c.getContext("2d");

  ctx.font = "100px CAhem";

  ctx.fillText("ghijkl", 0, 80);

});

</script>