HTML5 logo with canvas
HTML
<canvas id="tutorial" width="150" height="150" ></canvas>
CSS
body { padding:50px; }
JavaScript
var canvas = document.querySelector("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#E34C26";
var endX = 114;
var beginX = 0;
var beginY = 0;
var IncreaseY = .97
var maxIncreaseY = .11;
var reduceX = .9;
var bottomRightX = endX * reduceX;
var bottomLeftX = endX - bottomRightX;
var IncreasedY = endX + (1 - IncreaseY) * endX;
var maxIncleasedY = IncreasedY * maxIncreaseY + IncreasedY;
ctx.beginPath();
ctx.moveTo(beginX, beginY);
ctx.lineTo(endX, beginY);
ctx.lineTo(bottomRightX, IncreasedY);
ctx.lineTo(endX / 2, maxIncleasedY);
ctx.lineTo(bottomLeftX, IncreasedY);
ctx.lineTo(beginX, beginY);
ctx.fill();
var secondBoxMargin = 10;
var secondEndX = (endX - secondBoxMargin);
var secondBottomRightX = secondEndX * reduceX;
var secondIncreasedY = secondEndX + (1 - IncreaseY) * secondEndX;
ctx.fillStyle = "#F16529";
ctx.beginPath();
ctx.moveTo(endX / 2, secondBoxMargin);
ctx.lineTo(secondEndX, secondBoxMargin);
ctx.lineTo(secondBottomRightX, secondIncreasedY);
ctx.lineTo(endX / 2, maxIncleasedY - secondBoxMargin);
ctx.lineTo(endX / 2, secondBoxMargin);
ctx.fill();
var thirdBoxMargin = 25;
ctx.fillStyle = "white";
ctx.beginPath();
ctx.moveTo(endX / 2, thirdBoxMargin);
ctx.lineTo(94, thirdBoxMargin);
ctx.lineTo(93, 39);
ctx.lineTo(endX / 2, 39);
ctx.lineTo(endX / 2, thirdBoxMargin);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(endX / 2, 53);
ctx.lineTo(90, 53);
ctx.lineTo(86, IncreasedY - 20);
ctx.lineTo(endX / 2, maxIncleasedY - 24);
ctx.lineTo(endX / 2, maxIncleasedY - 38);
ctx.lineTo(endX / 2 + 16, maxIncleasedY - 43);
ctx.lineTo(endX / 2 + 16 + 2, 68);
ctx.lineTo(endX / 2, 68);
ctx.fill();
ctx.beginPath();
ctx.moveTo(endX / 2, thirdBoxMargin);
ctx.lineTo(24, thirdBoxMargin);
ctx.lineTo(28,...