-
Notifications
You must be signed in to change notification settings - Fork 20
Expand file tree
/
Copy pathcomplex-text.html
More file actions
50 lines (46 loc) · 1.58 KB
/
complex-text.html
File metadata and controls
50 lines (46 loc) · 1.58 KB
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!doctype html>
<meta charset="utf-8" />
<title>Demo of complex text in canvas</title>
<style>
canvas {
border: 1px solid blue;
width: 638px;
height: 318px;
}
</style>
<canvas id="canvas" width="638" height="318" layoutsubtree="true">
<div id="draw_element" style="width: 550px;">
Hello from <a href="https://github.com/WICG/html-in-canvas">html-in-canvas</a>!
<br>I'm multi-line, <b>formatted</b>,
rotated text with emoji (😀), RTL text
<span dir=rtl>من فارسی صحبت میکنم</span>,
vertical text,
<p style="writing-mode: vertical-rl;">
这是垂直文本
</p>
an inline image (<img width="150" src="wolf.jpg">), and
<svg width="50" height="50">
<circle cx="25" cy="25" r="20" fill="green" />
<text x="25" y="30" font-size="15" text-anchor="middle" fill="#fff">
SVG
</text>
</svg>!
</div>
</canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.onpaint = (event) => {
ctx.reset();
ctx.rotate((15 * Math.PI) / 180);
ctx.translate(80 * devicePixelRatio, -20 * devicePixelRatio);
let transform = ctx.drawElementImage(draw_element, 0, 0);
draw_element.style.transform = transform.toString();
};
canvas.requestPaint(); // Request an initial paint event.
const observer = new ResizeObserver(([entry]) => {
canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
});
observer.observe(canvas, {box: 'device-pixel-content-box'});
</script>