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.