/
index.md
89 lines (64 loc) · 2.38 KB
/
index.md
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
---
title: "TextFormatUpdateEvent: getTextFormats() method"
short-title: getTextFormats()
slug: Web/API/TextFormatUpdateEvent/getTextFormats
page-type: web-api-instance-method
status:
- experimental
browser-compat: api.TextFormatUpdateEvent.getTextFormats
---
{{APIRef("EditContext API")}}{{SeeCompatTable}}
The **`getTextFormats()`** method of the {{domxref("TextFormatUpdateEvent")}} interface returns an {{jsxref("Array")}} of {{domxref("TextFormat")}} objects that represent the formats that an {{glossary("Input Method Editor")}} (IME) window wants to apply to the text being composed.
## Syntax
```js-nolint
getTextFormats()
```
### Return value
An {{jsxref("Array")}} containing {{domxref("TextFormat")}} objects.
## Examples
### Styling IME-composed text
In the following example, the `textformatupdate` event is used to update the formatting of the text in the editable region.
```html
<canvas id="editor-canvas"></canvas>
```
```js
const TEXT_X = 10;
const TEXT_Y = 10;
const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
const editContext = new EditContext();
canvas.editContext = editContext;
editContext.addEventListener("textformatupdate", (e) => {
// Clear the canvas.
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Render the text.
ctx.fillText(editContext.text, TEXT_X, TEXT_Y);
console.log(`Rendering text: ${editContext.text}`);
// Get the text formats that the IME window wants to apply.
const formats = e.getTextFormats();
// Iterate over the text formats
for (const format of formats) {
const { rangeStart, rangeEnd, underlineStyle, underlineThickness } = format;
console.log(
`Applying underline ${underlineThickness} ${underlineStyle} between ${rangeStart} and ${rangeEnd}.`,
);
const underlineXStart = ctx.measureText(
editContext.text.substring(0, rangeStart),
).width;
const underlineXEnd = ctx.measureText(
editContext.text.substring(0, rangeEnd),
).width;
const underlineY = TEXT_Y + 3;
// For brevity, this example only draws a simple underline.
// Use underlineStyle and underlineThickness to draw the correct underline.
ctx.beginPath();
ctx.moveTo(TEXT_X + underlineXStart, underlineY);
ctx.lineTo(TEXT_X + underlineXEnd, underlineY);
ctx.stroke();
}
});
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}