JSFiddle - React, Tailwind, and code Playground

by MikeEast

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputVertices" class="col-sm-2 control-label">Vertices</label>
    <div class="col-sm-10">
      <input type="range" data-bind="value: vertices" min="3" max="100" />
    </div>
  </div>  
  <div class="form-group">
    <label for="inputVertices" class="col-sm-2 control-label">Vertices</label>
    <div class="col-sm-10">
      <span class="form-control-static" data-bind="text: vertices"></span>
    </div>
  </div>  
<div class="form-group">
    <label for="inputVertices" class="col-sm-2 control-label">Vertex Angle</label>
    <div class="col-sm-10">
       <span  class="form-control-static" data-bind="text: anglePerVertex"></span>
    </div>
  </div>     
</div>
<canvas id="myCanvas" width="500" height="500">
Your browser does not support the HTML5 canvas tag.</canvas>

CSS

input {
    width: 370px;    
}
#myCanvas {
    border:1px solid #d3d3d3;
}

JavaScript

var viewModel = function() {
    self = this,
    self.vertices = ko.observable(3);
    self.anglePerVertex = ko.computed(function() {
        return (self.vertices()-2)*180/self.vertices();
    });
    self.getPoints = function(vertices) {
        var points = [];
        for(var i = 0; i < vertices;i++) {
            var angle = ((2*Math.PI)/vertices)*i;
            points.push({X: Math.cos(angle), Y: Math.sin(angle)});
        }
        return points;
    },
    ko.computed(function() {
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.moveTo(500,250);
        var points = self.getPoints(self.vertices());
        for(var p in points) {
           context.lineTo(points[p].X*250+250, points[p].Y*250+250);
        }
        context.closePath();
        context.lineWidth = 1;
        context.strokeStyle = 'gray';
        context.stroke();
    });

};

ko.applyBindings(new viewModel());