CODEWITHSUNDEEP
javascripthtmlcanvas
Vincent Thibault
Vincent Thibault

Reputation: 601

HTML5 Canvas and ugly text-border

I'm searching a way to render a white text with a black border in a HTML5 canvas. I didn't find a solution to get a pretty result, trying some differents ways (shadow, strokeText, ...), always got a poor result (maybe due to the AA).

Here the base I want to copy :

original I want to copy

You can see my tests here: http://jsfiddle.net/7H79m/

ctx.font         = "12px Arial";
ctx.textBaseline = "top"; 
ctx.fillStyle    = "white";
ctx.strokeStyle  = "black";
ctx.lineWidth    = 2;

ctx.strokeText( "HappyEnd", x, y );
ctx.fillText( "HappyEnd", x, y );

If you know a solution, share it ! :)

Upvotes: 1

Views: 2604

Answers (4)

user1693593
user1693593

Reputation:

You won't be able to achieve exact result with the built-in stroke effect on text, as the text-rendering is currently a bit so-so (IMO) in the various browsers due to sub-pixeling issues (see Chrome vs FF).

You can however simulate the stroke in this way (render in FF21):

snapshot FF/v21

//Force anti-alias
ctx.translate(0.5, 0.5);

//...
//Create stroke effect:
ctx.fillStyle    = "black";
ctx.fillText( "HappyEnd", x-1, y );
ctx.fillText( "HappyEnd", x,   y-1 );
ctx.fillText( "HappyEnd", x+1, y );
ctx.fillText( "HappyEnd", x,   y+1 );

//draw normal text
ctx.fillStyle    = "white";
ctx.fillText( "HappyEnd", x, y );

For full modification, click here.

and of course, you can always incorporate the "outline" into a function:

function outlineText(ctx, color, txt, x, y) {
    ctx.fillStyle    = color;
    ctx.fillText( txt, x-1, y );
    ctx.fillText( txt, x,   y-1 );
    ctx.fillText( txt, x+1, y );
    ctx.fillText( txt, x,   y+1 );
}

Or instead extend the canvas context:

if (CanvasRenderingContext2D != 'undefined') {
    CanvasRenderingContext2D.prototype.outlineText = 
        function outlineText(txt, x, y) {
            this.fillText( txt, x-1, y );
            this.fillText( txt, x,   y-1 );
            this.fillText( txt, x+1, y );
            this.fillText( txt, x,   y+1 );
        }
}

Usage:

ctx.outlineText("HappyEnd", x, y);

See live example of usage incorporated in your example here.

Upvotes: 2

markE
markE

Reputation: 105015

[Edited to try different effect]

Here is a try with multiple shadows to solidify the AA

http://jsfiddle.net/m1erickson/BSU7P/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas = document.getElementById('canvas');
    var ctx    = canvas.getContext('2d');

    // Load background
    var bg = new Image();
    bg.onload = function() {
        canvas.width  = this.width;
        canvas.height = this.height;
        ctx.drawImage(this, 0, 0);
        process();
    };
    bg.src = "http://upload.robrowser.com/bg-test-text.jpg";


    function process() {
        var x = canvas.width /2;
        var y = canvas.height/2;

        ctx.font="12px Arial";

        try1(x,y);
        try2(x,y+20);
    }

    function try1(x,y){
    multiShadow("HappyEnd",x,y,0,-1,0);
    multiShadow("HappyEnd",x,y,0,1,0);
    multiShadow("HappyEnd",x,y,-1,0,0);
    multiShadow("HappyEnd",x,y,1,0,0);
    ctx.fillStyle="white";
    ctx.strokeStyle="black";
    ctx.strokeText("HappyEnd",x,y);
    ctx.fillText("HappyEnd",x,y);
    }

    function try2(x,y){
    multiShadow("HappyEnd",x,y,0,-1.5,8);
    multiShadow("HappyEnd",x,y,0,1.5,8);
    multiShadow("HappyEnd",x,y,-1.5,0,8);
    multiShadow("HappyEnd",x,y,1.5,0,8);
    ctx.fillStyle="white";
    ctx.fillText("HappyEnd",x,y);
    }


    function multiShadow(text,x,y,offsetX,offsetY,blur){
        ctx.textBaseline = "top"; 
        ctx.lineWidth    = 1;
        ctx.shadowColor = '#000';
        ctx.shadowBlur    = blur;
        ctx.shadowOffsetX = offsetX;
        ctx.shadowOffsetY = offsetY;
        ctx.fillStyle="black";
        ctx.fillText( "HappyEnd", x, y ); 
    }

}); // end $(function(){});
</script>

</head>

<body>

    <canvas id="canvas" width=300 height=300></canvas>

</body>
</html>

Upvotes: 1

Joban
Joban

Reputation: 1337

Here is my attempt. I basically tried to shrink the stroke by 1 pixel and make the stroke inside the fill. Only problem it is hard to center it all

// Create canvas, add it to body.
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

// Load background
var bg = new Image();
bg.src = "http://upload.robrowser.com/bg-test-text-original.jpg";
bg.onload = function () {
    canvas.width = this.width;
    canvas.height = this.height;
    ctx.drawImage(this, 0, 0);
    process();
};

// Do whatever you want here
function process() {
    var x = 62;
    var y = 30;

    ctx.font = "12px Arial";
    ctx.textBaseline = "top";
    ctx.fillStyle = "white";
    ctx.strokeStyle = "black";
    ctx.lineWidth = 2;

    ctx.font = "11.75px Arial";
    ctx.strokeText("HappyEnd", x, y);

    ctx.font = "12px Arial";
    ctx.fillText("HappyEnd", x, y);
}

Upvotes: 0

swirm
swirm

Reputation: 23

well there is allways blurring :

ctx.shadowColor = "#000";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 5;

Upvotes: 0

Related Questions