JSFiddle - React, Tailwind, and code Playground

by kikkoma

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js"></script>
<div id="bg">
<div id="container"></div>
</div>

CSS

#container{
    width:300px;
    height:300px;    
    border:solid 1px black;
}

#bg{
    backGround-color:white;
}

JavaScript

var stage = new Kinetic.Stage({
        container: 'container',
        width: 300,
        height: 300
    });

var layer = new Kinetic.Layer();

var rect2 = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 300,
        height: 300,
        fillRadialGradientStartPoint: 150,
        fillRadialGradientStartRadius: 0,
        fillRadialGradientEndPoint: 150,
        fillRadialGradientEndRadius: 150,
        fillRadialGradientColorStops: [0, "transparent",0.7, "transparent", 1,'blue'],
        opacity:1
    });

layer.add(rect2);

stage.add(layer);