Openlayers2 : I want to Draw a buffer on openlayer2 according to user input length

I want to draw a bufffer in openlayer2. It maybe in form of polygon or circle as shown in circle. I checked all draw features official examples but I didnt find any helpful material there.I have attached a example

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>Modify Feature</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="stylesheet" href="style1.css" type="text/css">
    <style type="text/css">
        #controls {
            width: 512px;
        }
        #controlToggle {
            padding-left: 1em;
        }
        #controlToggle li {
            list-style: none;
        }
    </style>
    <script src="OpenLayers.js"></script>
    <script type="text/javascript">
        var map, vectors, controls;
        function init(){
            map = new OpenLayers.Map('map');
            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
                "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'}); 
            OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';

            // allow testing of specific renderers via "?renderer=Canvas", etc
          

            vectors = new OpenLayers.Layer.Vector("Vector Layer", {
               
            });

            map.addLayers([wms, vectors]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition());
            
            if (console && console.log) {
                function report(event) {
                    console.log(event.type, event.feature ? event.feature.id : event.components);
                }
                vectors.events.on({
                    "beforefeaturemodified": report,
                    "featuremodified": report,
                    "afterfeaturemodified": report,
                    "vertexmodified": report,
                    "sketchmodified": report,
                    "sketchstarted": report,
                    "sketchcomplete": report
                });
            }
            controls = {
                
              
                
                regular: new OpenLayers.Control.DrawFeature(vectors,
                            OpenLayers.Handler.RegularPolygon,
                            {handlerOptions: {sides: 5}}),
                modify: new OpenLayers.Control.ModifyFeature(vectors)
            };
            
            for(var key in controls) {
                map.addControl(controls[key]);
            }
            
            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
            document.getElementById('noneToggle').checked = true;
        }
        
        function update() {
            // reset modification mode
            controls.modify.mode = OpenLayers.Control.ModifyFeature.RESHAPE;
          
            var resize = document.getElementById("resize").checked;
            if(resize) {
                controls.modify.mode |= OpenLayers.Control.ModifyFeature.RESIZE;
                var keepAspectRatio = document.getElementById("keepAspectRatio").checked;
                if (keepAspectRatio) {
                    controls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE;
                }
            }
         
            controls.modify.createVertices = document.getElementById("createVertices").checked;
      
          
        }

        function toggleControl(element) {
            for(key in controls) {
                var control = controls[key];
                if(element.value == key && element.checked) {
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }
        
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">OpenLayers 2 Modify Feature Example</h1>
    <div id="tags">
        vertices, digitizing, draw, drawing
    </div>
    <div id="shortdesc">A demonstration of the ModifyFeature control for editing vector features.</div>
    <div id="map" class="smallmap"></div>
    <div id="controls">
        <ul id="controlToggle">
            <li>
                <input type="radio" name="type" value="none" id="noneToggle"
                       onclick="toggleControl(this);" checked="checked" />
                <label for="noneToggle">navigate</label>
            </li>
           
          
          
            <li>
                <input type="radio" name="type" value="regular" id="regularToggle" onclick="toggleControl(this);" />
                <label for="regularToggle">draw regular polygon</label>
                <label for="sides"> - sides</label>
                <input id="sides" type="text" size="2" maxlength="2"
                       name="sides" value="5" onchange="update()" />
                <ul>
                    

                </ul>
            </li>
            <li>
                <input type="radio" name="type" value="modify" id="modifyToggle"
                       onclick="toggleControl(this);" />
                <label for="modifyToggle">modify feature</label>
                <ul>
                   
                   
                    <li>
                        <input id="resize" type="checkbox"
                               name="resize" onchange="update()" />
                        <label for="resize">allow resizing</label>
                        (<input id="keepAspectRatio" type="checkbox"
                               name="keepAspectRatio" onchange="update()" checked="checked" />
                        <label for="keepAspectRatio">keep aspect ratio</label>)
                    </li>
                 
                </ul>
            </li>
        </ul>
    </div>
  </body>
</html>

Solution

If you want to create a circle around a point, you could use the openlayers builtin function

OpenLayers.Geometry.Polygon.createRegularPolygon = function(origin, radius, sides, rotation)

, passing the radio specified by user.

Otherwise, if you want to buffer an arbitrary polygon, you could use the buffer functionality provided by the JSTS library.

You can find an example with openlayers here http://bjornharrtell.github.io/jsts/examples/buffer.html