Fix the issue where textDecorationLine exhibits x-axis positioning er…

…rors on high-resolution devices due to varying devicePixelRatio, corrected by using relative values of element heights.

src/render/canvas/canvas-renderer.ts

@@ -223,35 +223,17 @@ export class CanvasRenderer extends Renderer {
                         if (styles.textDecorationLine.length) {
                             this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
                             styles.textDecorationLine.forEach((textDecorationLine) => {
+                                var fillHeight = 1;
+                                // Fix the issue where textDecorationLine exhibits x-axis positioning errors on high-resolution devices due to varying devicePixelRatio, corrected by using relative values of element heights.
                                 switch (textDecorationLine) {
                                     case TEXT_DECORATION_LINE.UNDERLINE:
-                                        // Draws a line at the baseline of the font
-                                        // TODO As some browsers display the line as more than 1px if the font-size is big,
-                                        // need to take that into account both in position and size
-                                        this.ctx.fillRect(
-                                            text.bounds.left,
-                                            Math.round(text.bounds.top + baseline),
-                                            text.bounds.width,
-                                            1
-                                        );
-
+                                        this.ctx.fillRect(text.bounds.left, text.bounds.top + text.bounds.height - fillHeight, text.bounds.width, fillHeight);
                                         break;
                                     case TEXT_DECORATION_LINE.OVERLINE:
-                                        this.ctx.fillRect(
-                                            text.bounds.left,
-                                            Math.round(text.bounds.top),
-                                            text.bounds.width,
-                                            1
-                                        );
+                                        this.ctx.fillRect(text.bounds.left, text.bounds.top , text.bounds.width, fillHeight);
                                         break;
                                     case TEXT_DECORATION_LINE.LINE_THROUGH:
-                                        // TODO try and find exact position for line-through
-                                        this.ctx.fillRect(
-                                            text.bounds.left,
-                                            Math.ceil(text.bounds.top + middle),
-                                            text.bounds.width,
-                                            1
-                                        );
+                                        this.ctx.fillRect(text.bounds.left, text.bounds.top + (text.bounds.height / 2 - fillHeight / 2), text.bounds.width, fillHeight);
                                         break;
                                 }
                             });