function draw() {
        var canvas = document.getElementById('canvas');
        canvas.style.position = 'absolute';
        canvas.style.left = "-10px";

        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            for (var i = 0; i < 29; i++) {
                ctx.fillRect(20 + i * 20, 20, 4, 4);
            }
            roundedRect(ctx, 0, 0, 620, 50, 10);
            leftRect(ctx, 0, 0, 50, 10);
            rightRect(ctx, 0, 0, 620, 50, 10);
        }
    }
    function roundedRect(ctx, x, y, width, height, radius) {
        ctx.beginPath();
        ctx.moveTo(x, y + radius);
        ctx.lineTo(x, y + height - radius);
        ctx.arcTo(x, y + height, x + radius, y + height, radius);
        ctx.lineTo(x + width - radius, y + height);
        ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius);
        ctx.lineTo(x + width, y + radius);
        ctx.arcTo(x + width, y, x + width - radius, y, radius);
        ctx.lineTo(x + radius, y);
        ctx.arcTo(x, y, x, y + radius, radius);
        ctx.stroke();
    }
    function leftRect(ctx, x, y, height, radius) {
        ctx.beginPath();
        ctx.moveTo(x, y + radius);
        ctx.lineTo(x, y + height - radius);
        ctx.arcTo(x, y + height, x + radius, y + height, radius);
        ctx.lineTo(x + radius, y);
        ctx.arcTo(x, y, x, y + radius, radius);
        if (js_vars.role == 'agent'){
            ctx.globalAlpha = 0.8
        } else if (js_vars.role == 'principal'){
            ctx.globalAlpha = 0.7
        }
        ctx.fillStyle = "green";
        ctx.fill();
    }
    function rightRect(ctx, x, y, width, height, radius) {
        ctx.beginPath();
        ctx.moveTo(x + width - radius, y);
        ctx.lineTo(x + width - radius, y + height);
        ctx.arcTo(x + width, y + height, x + width, y + height - radius, radius);
        ctx.lineTo(x + width, y + radius);
        ctx.arcTo(x + width, y, x + width - radius, y, radius);
        ctx.lineTo(x + width - radius, y);
        if (js_vars.role == 'principal'){
            ctx.globalAlpha = 0.8
        } else if (js_vars.role == 'agent'){
            ctx.globalAlpha = 0.7
        }
        ctx.fillStyle = "blue";
        ctx.fill();
    }

    $(document).ready(function() {
        draw();
    });