Openlayers Graphic Feature with own Symbol

Question

As in example http://openlayers.org/dev/examples/graphic-name.html ... I tried drawing my feature geometry as a flag but I realized that OpenLayers always uses the centroid of the geometry to place the feature at the specified point(latitude/longitude), whereas I wish the base of the flag to be placed at the specified point. Changing the value of Renderer.symbol did not make any effect neither did the graphicXOffset/graphicYOffset.

//my flag geometry
OpenLayers.Renderer.symbol.flag = [0, 0, 0, 140, 120, 140, 120, 60, 4, 60, 4, 0, 0, 0];

//create vector layer with default and select styles
myVectorLayer = new OpenLayers.Layer.Vector("Flag Geometry", {
    renderers: renderer,
    isBaseLayer: true,
    graphicName: flag,
    rotation: 180,
    pointRadius: 15,
    projection: new OpenLayers.Projection("EPSG:900913"),
    styleMap: new OpenLayers.StyleMap({
        "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
            fillColor: "red",
            strokeColor: "gray",
            label: "${label}",
            fontColor: "${favColor}",
            fontSize: "12px",
            fontFamily: "Courier New, monospace",
            fontWeight: "bold",
            labelYOffset: 2 //for flag
        }, OpenLayers.Feature.Vector.style["default"])),
        "select": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
        }, OpenLayers.Feature.Vector.style["select"]))
    })
});

var flag = new OpenLayers.Geometry.Point(latitude, longitude);
var flagFeature = new OpenLayers.Feature.Vector(flag);
myVectorLayer.addFeatures([flagFeature]);

Answer 1

To overcome this base point problem I changed the drawing method as follows:

myVectorLayer = new OpenLayers.Layer.Vector("Flag Geometry", {
renderers: renderer,
isBaseLayer: true,
projection: new OpenLayers.Projection("EPSG:900913"),
styleMap: new OpenLayers.StyleMap({
    "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
        fillColor: "red",
        strokeColor: "gray",
        label: "${label}",
        fontColor: "${favColor}",
        fontSize: "12px",
        fontFamily: "Courier New, monospace",
        fontWeight: "bold",
        labelYOffset: 2 //for flag
    }, OpenLayers.Feature.Vector.style["default"])),
        "select": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
    }, OpenLayers.Feature.Vector.style["select"]))
})
});

var pointList = [];
var xs = [0, 0, 240, 240, 8, 8, 0];
var ys = [0, 280, 280, 120, 120, 0, 0];

for(var p=0; p<6; ++p) {
    var newPoint = new OpenLayers.Geometry.Point(camera.get('latitude') + xs[p],
        camera.get('longitude') + ys[p]);

    pointList.push(newPoint);
}
pointList.push(pointList[0]);
var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
var flagVector = new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Polygon([linearRing]));

flagVector.attributes= {
    label: 'label',
    favColor: 'blue', //favorite color
    align: "cm"
};
myVectorLayer.addFeatures([flagVector]);

This though will make the geometry zoom with map zoom not as the previous way.