TextFormatUpdateEvent

<canvas id="editor-canvas"></canvas>

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(); } });