CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Reshad
Reshad

Reputation: 2652

manipulate text with html5 canvas

Hello I want to draw the logo of Chelsea Football Club and I have got already the 'big things' like the circle and the innerwhite space etc.. and the text but there is where I got a problem with.. in the logo the text is like in a halve circle shape but I can't find a way to draw it like this in canvas for an example for the right text see image below and see also my code

$(function () {

        //variables
        var canvas = document.getElementById("chelseaLogo");
        var CanvasContext = canvas.getContext("2d");
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 170;
        var radiusWhite = radius - 30;

        // outside logo
        CanvasContext.beginPath();
        CanvasContext.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        CanvasContext.fillStyle = '#0B49DB';
        CanvasContext.fill();

        //stroke
        CanvasContext.lineWidth = 2;
        CanvasContext.strokeStyle = '#FFF700';
        CanvasContext.stroke();

        //white innercircle
        CanvasContext.beginPath();
        CanvasContext.arc(centerX, centerY, radiusWhite, 0, 2 * Math.PI, false);
        CanvasContext.fillStyle = '#fff';
        CanvasContext.fill();

        //text top
        CanvasContext.font = '15pt Calibri';
        CanvasContext.fillText('Chelsea', 155, 25);

        //text bottom
        CanvasContext.font = '15pt Calibri';
        CanvasContext.fillText('Football Club', 140, 330);

});

Chelsea Logo

Upvotes: 0

Views: 1365

Answers (1)

Shmiddty
Shmiddty

Reputation: 13967

I've modified the tutorial code that @Esailija posted to be a bit more accurate/flexible:

function drawTextAlongArc(context, str, hei, centerX, centerY, radius, angle, above) {
    var met, wid;
    context.save();
    context.translate(centerX, centerY);
    if (!above) {
        radius = -radius;
        angle = -angle;
    }
    else{
        hei = 0;
    }
    context.rotate(-1 * angle / 2);
    context.rotate(-1 * (angle / str.length) / 2);

    for (var n = 0; n < str.length; n++) {
        var char = str[n];
        met = context.measureText(char);
        wid = met.width;
        console.log(met);

        context.rotate(angle / str.length);
        context.fillText(char, -wid / 2, -radius + hei);
        context.strokeText(char, -wid / 2, -radius + hei);
    }
    context.restore();
}
ctx.font = 'bold 40pt impact';
ctx.fillStyle = '#000';
ctx.strokeStyle = '#f00';
ctx.lineWidth = 2;
drawTextAlongArc(ctx, "CHELSEA", 40, 200, 200, 100, Math.PI*3/5, true);

ctx.font = 'bold 20pt impact';
drawTextAlongArc(ctx, "FOOTBALL CLUB", 30, 200, 200, 100, Math.PI*3/5, false);

ctx.beginPath();
ctx.arc(200,200,100,0,Math.PI*2,false);
ctx.stroke();

You can see an example of this here: http://jsfiddle.net/6uQSS/1/

Upvotes: 3

Related Questions