I made a Twitter logo in HTML5. It's like the ugly brother of the actual Twitter logo

My entry for the js13kgames challenge was cutting it too close to 13kb and I needed more room, so I decided to cut out the one image that I had - the Twitter logo for the sharing link at the Game Over screen.

Instead, I figured why not draw the Twitter logo in HTML5. It…kind of worked…in a slapped together dodgy kind of way. Let’s just say it looks like the ugly brother of the actual Twitter logo:

Code:

function drawTwitterBird() {
    ctx.shadowBlur = null;
    var x = ctx.canvas.width / 2 - 110;
    var y = headingHeight + 240;
    var radius = 25;
    var startAngle = (Math.PI / 180) * 15;
    var endAngle   = (Math.PI / 180) * 130;
    var anticlockwise = false;
    ctx.fillStyle = '#00aced';
    ctx.strokeStyle = '#00aced';
    ctx.beginPath();
    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

    x = x + 15;
    y = y + 2;
    radius = 10;
    startAngle = 0;
    endAngle   = 2 * Math.PI;

    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
    ctx.fill();

    x = x - 32;
    y = y - 5;
    radius = 22;
    startAngle = (Math.PI / 180) * 15;
    endAngle   = (Math.PI / 180) * 95;

    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

    ctx.moveTo(x + 37,y - 4);
    ctx.lineTo(x + 45,y - 7);
    ctx.lineTo(x + 37,y + 1);
    ctx.lineTo(x + 48,y);
    ctx.lineTo(x + 37,y + 8);
    ctx.fill();

    var fromX = x + 20;
    var fromY = y + 8;
    var toX   = x + 2;
    var toY   = y - 5;
    var cpX   = x + 7;
    var cpY   = y + 3;

    ctx.moveTo(fromX, fromY);
    ctx.quadraticCurveTo(cpX, cpY, toX, toY);
    ctx.quadraticCurveTo(cpX - 3,cpY + 5,toX + 7, toY + 13);
    ctx.quadraticCurveTo(cpX - 3, cpY + 5,toX - 3,toY + 7);
    ctx.quadraticCurveTo(cpX - 5, cpY + 8,toX + 3,toY + 15);
    ctx.quadraticCurveTo(cpX - 6, cpY + 10,toX - 4,toY + 14);
    ctx.quadraticCurveTo(cpX - 5, cpY + 15,toX + 10,toY + 23);
    ctx.stroke();
    ctx.fill();
    ctx.closePath();
};

Nevertheless, I’m kind of proud of my little ugly Twitter bird. I know I did this in a totally backwards way, but at least it looks kind of like a bird…kind of. And it did give me 2 more kb to play with.