Edit in JSFiddle

    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: