27 lines
593 B
HTML
27 lines
593 B
HTML
<!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>
|