How to subclass Polygon in Leaflet?

I am trying to create a Hex class for Leaflet where the center and side length should be in screen units (pixels) as opposed to lat/lng to obtain an effect like this over the map.

Code is here:

L.Hex = L.Polygon.extend({
    initialize: function (args) {
        console.log('arguments', JSON.stringify(arguments));
        console.log('arguments[0]', JSON.stringify(arguments[0]));

        // options = options || {};

        this.center  = args[0];
        this.size    = args[1];
        this.options = args[2] || {};

        L.Polygon.prototype.initialize.call(this, [], this.options);
    },

    points: function(center, size, map){
        var latlngs = [0, 1, 2, 3, 4, 5, 6]
            .map(p => this.hexCorner(center, size, p))
            .map(p => map.layerPointToLatLng(p));
        return latlngs;
    },

    hexCorner: function(center, size, i){
        var angle_deg = 60 * i - 30;
        var angle_rad = Math.PI / 180 * angle_deg;

        return [center[0] + size * Math.cos(angle_rad),
                center[1] + size * Math.sin(angle_rad)]
    },
})

L.hex = function(){ return new L.Hex(arguments) }

Since the coordinates are in user space I think can only calculate them after adding to the map - but that's what fails. If add the points like this:

var h = L.hex([100, 100], 30);
var points = h.points([100, 100], 30, e.map);
h.setLatLngs(points);
h.addTo(map);

things work ok but my best attempt at onAdd which is this:

onAdd: function (map) {
    var points = this.points(this.center, this.size, map);
    this.setLatLngs(points);
    map.addLayer(this);
},

with message TypeError: t._path is undefined

So the question is: where is the problem and how should I do it otherwise?