Canvas font auto wrap line thickness to solve 1px line blur problem

Time:2021-9-29

Ctx.filltext automatically replace rows

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title>fillText Auto-wrap</title>
</head>

<body>
    < canvas id = "mycanvas" > your browser does not support canvas</ canvas>
    <br>
    < textarea id = "input" row = "6" col = "60" style = "width: 300px; height: 100px;" > auto wrap text auto wrap text auto wrap text auto wrap < / textarea >
</body>

</html>

(function() {
    function writeTextOnCanvas(cns, lh, rw, text) {
        var cns = document.getElementById(cns);
        var ctx = cns.getContext("2d");
        var lineheight = lh;
        var text = text;

        ctx.width = cns.width;
        ctx.height = cns.height;

        ctx.clearRect(0, 0, ctx.width, ctx.height);
        Ctx.font = "16px Microsoft YaHei";
        ctx.fillStyle = "#f00";

        Function gettruelength (STR) {// get the real length of the string (byte length)
            var len = str.length,
                truelen = 0;
            for (var x = 0; x < len; x++) {
                if (str.charCodeAt(x) > 128) {
                    truelen += 2;
                } else {
                    truelen += 1;
                }
            }
            return truelen;
        }

        Function cutstring (STR, Leng) {// intercepts a string by byte length and returns the substr intercepting position
            var len = str.length,
                tlen = len,
                nlen = 0;
            for (var x = 0; x < len; x++) {
                if (str.charCodeAt(x) > 128) {
                    if (nlen + 2 < leng) {
                        nlen += 2;
                    } else {
                        tlen = x;
                        break;
                    }
                } else {
                    if (nlen + 1 < leng) {
                        nlen += 1;
                    } else {
                        tlen = x;
                        break;
                    }
                }
            }
            return tlen;
        }
        for (var i = 1; getTrueLength(text) > 0; i++) {
            var tl = cutString(text, rw);
            ctx.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), 10, i * lineheight + 50);
            text = text.substr(tl);
        }
    }
    writeTextOnCanvas("mycanvas", 22, 40, document.getElementById("input").value);
    document.getElementById("input").onkeyup = function() {
        writeTextOnCanvas("mycanvas", 22, 40, this.value);
    }
})();

design sketch:
Canvas font auto wrap line thickness to solve 1px line blur problem

1px line settings
The line drawing method of canvas is different. Each line of canvas has an infinitely thin “center line”, and the width of the line extends from the center line to both sides.
If we still draw a line from the pixel, the center line of the line will be aligned to the starting point of the pixel,
Then we began to draw, and the problem came: the lines of canvas extend to both sides with the center line, not to one side
(for example, if it only extends to one side, our problem is no longer a problem)
At this time, there is another problem: the computer does not allow graphics less than 1px, so he made a compromise: draw both pixels.
Therefore, in this way, the original 1px line becomes a 2px wide line.
The reason for the failure is found: the line in canvas aligns the center line with the starting point of the pixel, not the middle point of the pixel.

Summary: the above is to solve the blur caused by lines with a width of 1 pixel. The solution is to shift half a pixel during positioning.However: for wide lines, each half is an integer of pixels, so you need a path between pixels (i.e. (3,1) to (3,5)), not in the middle of pixels.
Canvas font auto wrap line thickness to solve 1px line blur problem

Character spacing setting
canvas.style.letterSpacing = range.value + ‘px’;

Recommended Today

SQL exercise 20 – Modeling & Reporting

This blog is used to review and sort out the common topic modeling architecture, analysis oriented architecture and integration topic reports in data warehouse. I have uploaded these reports to GitHub. If you are interested, you can have a lookAddress:https://github.com/nino-laiqiu/TiTanI recorded a relatively complete development process in my hexo blog deployed on GitHub. You can […]