<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

<style>
html, body {
    margin:10px;
    padding:10px;
}
#worker {
    width: 100%;
    background: #ccc;
    height: 100%;
    position: relative;
}
.block {
    background: black;
    opacity: 0.5;
    width: 40px;
    height: 40px;
}

</style>

<script>
$(function() {
    var $worker = $('#worker')
    ,   $canvas = $('#picture')
    ,   ctx = $canvas[0].getContext('2d');




    function onResize() {



        var width = $worker.width();
        var height =  $worker.height();

        $canvas.attr({'width': width, 'height': height});

        /**
         * all ok
         */

        arc(ctx, 0, 0.1*height);
        arc(ctx, 0.02*width, 0);
        arc(ctx, 0.05*width, 0);
        arc(ctx, 0.11*width, 0);
        arc(ctx, 0.15*width, 0.5*height);
        arc(ctx, 0.186*width, height);
        arc(ctx, 0.3*width, height);
        arc(ctx, 0.38*width, 1*height);
        arc(ctx, 0.4*width, 0.7*height);
        arc(ctx, 0.43*width, 0.3*height);


        arc(ctx, 0.5*width, 0.3*height);
        arc(ctx, 0.57*width, 0.3*height);
        arc(ctx, 0.6*width, 0.7*height);
        arc(ctx, 0.62*width, 1*height);
        arc(ctx, 0.7*width, 1*height);
        arc(ctx, 0.814*width, 1*height);
        arc(ctx, 0.85*width, 0.5*height);
        arc(ctx, 0.89*width, 0);
        arc(ctx, 0.95*width, 0);
        arc(ctx, 0.98*width, 0);
        arc(ctx, width, 0.1*height);

        ctx.lineWidth = 3;
        ctx.strokeStyle = "#000";

        ctx.beginPath();
        ctx.moveTo(0, 0.1*height);


        ctx.bezierCurveTo(
            0, 0.1*height,
            0.02*width, 0,
            0.05*width, 0
        );

        ctx.stroke();
        ctx.strokeStyle = "#FF0000";
        ctx.beginPath();

        ctx.bezierCurveTo(
            0.05*width, 0,
            0.11*width, 0,
            0.15*width, 0.5*height
        );

        ctx.stroke();
        ctx.strokeStyle = "#336600";
        ctx.beginPath();

        ctx.bezierCurveTo(
            0.15*width, 0.5*height,
            0.186*width, height,
            0.3*width, height
        );

        ctx.stroke();
        ctx.strokeStyle = "#FF9933";
        ctx.beginPath();

        ctx.bezierCurveTo(
            0.3*width, height,
            0.38*width, 1*height,
            0.4*width, 0.7*height
        );

        ctx.stroke();
        ctx.strokeStyle = "#00FFFF";
        ctx.beginPath();

        ctx.bezierCurveTo(
            0.4*width, 0.7*height,
            0.43*width, 0.3*height,
            0.5*width, 0.3*height
        );

        ctx.stroke();
        ctx.strokeStyle = "#000";
        ctx.beginPath();

        /**
         *
         */
        ctx.bezierCurveTo(
            0.5*width, 0.3*height,
            0.57*width, 0.3*height,
            0.6*width, 0.7*height
        );

        ctx.bezierCurveTo(
            0.6*width, 0.7*height,
            0.62*width, 1*height,
            0.7*width, 1*height
        );

        ctx.bezierCurveTo(
            0.7*width, 1*height,
            0.814*width, 1*height,
            0.85*width, 0.5*height
        );

        ctx.bezierCurveTo(
            0.85*width, 0.5*height,
            0.89*width, 0,
            0.95*width, 0
        );

        ctx.bezierCurveTo(
            0.95*width, 0,
            0.98*width, 0,
            width, 0.1*height
        );

        ctx.stroke();

        return onResize;
    }

    function arc(ctx, x, y) {
        ctx.strokeStyle="#999";
        ctx.fillStyle="blue";
        ctx.arc(x-1,y,1, 0,2*Math.PI);
        ctx.stroke();
    }

    $(window).resize(onResize());
});

</script>


<div id='worker'>
    <canvas id="picture" style='position: absolute'></canvas>
    <table width=100% height=100%>
        <td width=16% align='right'>
            <div class='block'></div>
        </td>
        <td width=34%>
            <div class='block' style='margin-left: 75%'></div>
        </td>
        <td width=34%>
            <div class='block' style='margin-left: 20%'></div>
        </td>
        <td width=16% align='left'>
            <div class='block'></div>
        </td>
    </table>
</div>