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.