document.addEventListener('DOMContentLoaded',function(){
var canvas = document.createElement('canvas');
canvas.id = 'bannerCanvas';
if(!(canvas.getContext && canvas.getContext('2d'))) {
return;
}
var header = document.getElementById('masthead'),
headerStyle = window.getComputedStyle(header),
headerPos = header.getBoundingClientRect();
var navbar = document.getElementById('navbar'),
navStyle = window.getComputedStyle(navbar),
navbarHeight = parseInt(navStyle.height);
var x = headerPos.left,
y = headerPos.top,
w = parseInt(headerStyle.width),
h = parseInt(headerStyle.height)- navbarHeight;
canvas.width = w;
canvas.height = h;
//document.body.appendChild(canvas);
header.parentNode.insertBefore(canvas,header);
var ctx = canvas.getContext('2d');
canvas.style.position = "absolute";
canvas.style.top = x;
canvas.style.left = y;
//background
ctx.fillStyle = "rgb(217,163,1)";
ctx.fillRect (0,0,canvas.width,canvas.height);
ctx.lineJoin = 'round';
ctx.lineWidth = 4;
ctx.strokeStyle = "rgb(2,105,180)";
drawLegs(ctx);
drawBody(ctx);
drawHead(ctx);
ctx.strokeStyle = "rgb(217,0,0)";
var duration = 2000; //in ms
var numFrames = 10;
var timePerFrame = (duration/numFrames);
var fps = 1000/timePerFrame;
var then = -1;
function animate(tx) {
var now = tx;
if(tx>duration){
window.cancelAnimationFrame(requestId);
return;
}
if( (now - then) > timePerFrame || then == -1){
drawNextDash(ctx);
then = now;
}
requestId = window.requestAnimationFrame(animate);
}
animate(0);
});
var x_lower = 0;
var x_upper = 0;
function drawNextDash(ctx){
var x_off = 744;
var t = 55;
var length = 17;
var gap = 33.5;
var m_upper = -0.075;
var y_upper = m_upper*x_upper+t;
ctx.beginPath();
ctx.moveTo(x_off+x_upper,y_upper);
ctx.lineTo(x_off+x_upper+length,m_upper*(x_upper+length)+t);
ctx.closePath();
ctx.stroke();
x_upper+=gap;
var m_lower = 0.177;
var y_lower = m_lower*x_lower+t;
ctx.beginPath();
ctx.moveTo(x_off+x_lower,y_lower);
ctx.lineTo(x_off+x_lower+length,m_lower*(x_lower+length)+t);
ctx.closePath();
ctx.stroke();
x_lower+=gap;
}
function drawLegs(ctx){
//left
ctx.beginPath();
ctx.moveTo(710,124);
ctx.lineTo(710-48,124+64);
ctx.stroke();
//right
ctx.beginPath();
ctx.moveTo(710,124);
ctx.lineTo(710+25,124+64);
ctx.stroke();
}
function drawBody(ctx){
//left arm
ctx.beginPath();
ctx.moveTo(675,101);
ctx.lineTo(675+42,101);
ctx.stroke();
//body
ctx.beginPath();
ctx.moveTo(723,85);
ctx.lineTo(723-13,85+32);
ctx.stroke();
//right arm
ctx.beginPath();
ctx.moveTo(723,101);
ctx.lineTo(723+39,101);
ctx.stroke();
}
function drawHead(ctx){
//head
ctx.beginPath();
ctx.arc(696+33, 22+33, 33, 0, 2 * Math.PI, false);
ctx.stroke();
//eye
ctx.beginPath();
ctx.arc(745, 45+8, 8, 0, 2 * Math.PI, false);
ctx.stroke();
}
function drawBoard(ctx){
ctx.beginPath();
ctx.moveTo(1023,12+15);
ctx.lineTo(1023+183,12);
ctx.lineTo(1023+183,12+134);
ctx.lineTo(1023,12+134-15);
ctx.closePath();
ctx.stroke();
}
function drawText(ctx){
ctx.font = "bold 35px Arial";
ctx.fillText("HTML", 1068, 64);
ctx.fillText("CSS", 1097, 118);
ctx.fillText("JS", 1035, 97);
}
<body>
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="http://www.bitcrunch.de/" title="Bitcrunch" rel="home">
<h1 class="site-title">Bitcrunch</h1>
<h2 class="site-description">Looking At Web Things</h2>
</a>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle">Menu</h3>
<a class="screen-reader-text skip-link" href="#content" title="Skip to content">Skip to content</a>
<div class="menu-menu-1-container"><ul id="menu-menu-1" class="nav-menu"><li id="menu-item-83" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-83"><a href="http://www.bitcrunch.de">Blog</a></li>
<li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://www.bitcrunch.de/about/">About</a></li>
</ul></div> <form role="search" method="get" class="search-form" action="http://www.bitcrunch.de/">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" title="Search for:">
</label>
<input type="submit" class="search-submit" value="Search">
</form> </nav><!-- #site-navigation -->
</div><!-- #navbar -->
</header>
</body>
External resources loaded into this fiddle: