Draw automatically the first vertice of a path with Open Layers

I'd like to help the user to input an orientation for a segment with OpenLayers.

I have that form where user can input the bearing for a point, but I would like to help him by :

start drawing the first vertice of a segment on the map when the user clicks on a button, (that first vertice being a known point)
then the user just has to click for the second vertice, and bearing is computed automatically.

See the fiddle here or SO snippet below.

I'm almost done : I can compute the bearing when a segment is drawn. But there's an exception at the very end of the script : I can't get OL to draw automatically the first point of my segment.

Thank you to anyone who can help.

<script src="http://openlayers.org/api/OpenLayers.js"></script>

<body>
  <div id="map" style="height: 500px"></div>
</body>



<script>
  var CONSTANTS = {
    MAP_FROM_PROJECTION: new OpenLayers.Projection("EPSG:4326"), // Transform from WGS 1984
    MAP_TO_PROJECTION: new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
  };

  function radians(n) {
    return n * (Math.PI / 180);
  }

  function degrees(n) {
    return n * (180 / Math.PI);
  }


  function computeBearing(startLat, startLong, endLat, endLong) {
    startLat = radians(startLat);
    startLong = radians(startLong);
    endLat = radians(endLat);
    endLong = radians(endLong);

    var dLong = endLong - startLong;

    var dPhi = Math.log(Math.tan(endLat / 2.0 + Math.PI / 4.0) / Math.tan(startLat / 2.0 + Math.PI / 4.0));
    if (Math.abs(dLong) > Math.PI) {
      if (dLong > 0.0) dLong = -(2.0 * Math.PI - dLong);
      else dLong = (2.0 * Math.PI + dLong);
    }

    return (degrees(Math.atan2(dLong, dPhi)) + 360.0) % 360.0;
  }


  map = new OpenLayers.Map("map");
  map.addLayer(new OpenLayers.Layer.OSM());
  map.setCenter(new OpenLayers.LonLat(3, 47).transform(CONSTANTS.MAP_FROM_PROJECTION, CONSTANTS.MAP_TO_PROJECTION), 6);


  var lineLayer = new OpenLayers.Layer.Vector("Line Layer");

  map.addLayers([lineLayer]);

  var lineControl = new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path, {
    handlerOptions: {
      maxVertices: 2,
      freehandMode: function(evt) {
        return false;
      }
    },
    featureAdded: function(feature) {
      var drawnLinePoints = feature.geometry.getVertices();
      var lonlat1 = drawnLinePoints[0].transform(CONSTANTS.MAP_TO_PROJECTION, CONSTANTS.MAP_FROM_PROJECTION);
      var lonlat2 = drawnLinePoints[1].transform(CONSTANTS.MAP_TO_PROJECTION, CONSTANTS.MAP_FROM_PROJECTION);
      var bearingValue = computeBearing(lonlat1.y, lonlat1.x, lonlat2.y, lonlat2.x);
      console.log(bearingValue);
    }
  });
  map.addControl(lineControl);
  lineControl.activate();


  var handler;
  for (var i = 0; i < map.controls.length; i++) {
    var control = map.controls[i];
    if (control.displayClass === "olControlDrawFeature") {
      handler = control.handler;
      break;
    }
  }

  // Here I have an exception in the console : I would like
  // OL to draw hat point automatically.
  handler.addPoint(new OpenLayers.Pixel(50, 50));
</script>

Solution

See this fiddle for the solution.

tldr :

// draw the first point as I needed, as if a user has clicked on the map
handler.modifyFeature(new OpenLayers.Pixel(50, 50), true); 

// draw a first point on the map (not clicked). 
// This will be the initial point where the "cursor" is on the map, as long as 
// the user hasn't hovered onto the map with its mouse. This make the blue 
// line showing current segment to appear, without this segment is drawn but 
// no feedback is given to the user as long as he hasn't clicked.
handler.addPoint(new OpenLayers.Pixel(50, 50)); //