y = height / 6 + 10;

    ctx.save();
    ctx.translate(sx, sy);

    // draw surface
    diagram.roundedRect(ctx, -100, 0, 200, 20);
    var d  = m3.dot(0, 1, Math.sin(direction), Math.cos(direction));
    ctx.fillStyle = diagram.hsl(0, 1, d - 0.5);
    ctx.fill();
    ctx.strokeStyle = diagram.rgb(0,0,0);
    ctx.stroke();

    ctx.fillStyle = "#FFF";
    ctx.fillText(lang.dot + d.toFixed(2), 0, 10);

    var nx = 0;
    var ny = -20;
    ctx.fillStyle = colors.surfaceDir;
    ctx.strokeStyle = colors.sur