blob: e7716ba874b4b9c3ce7a54480687a4442c7d7db8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!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>
|
