JSFiddle - React, Tailwind, and code Playground

by GeekStocks

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/v4.2.0/kinetic-v4.2.0.js"></script>
The goal here is to get a KineticJS canvas to stay inside a radiused div parent
<div id="problem" class="test-div"></div>
Canvas does not adhere to parent div's radius clipping by itself

<div class="spacer"></div>

So let's add overflow:hidden to the div...
<div id="tryOne" class="test-div"></div>
Ok, this works nice in FF and IE only!  Webkit (Chrome and Safari) still doesn't work...

<div class="spacer"></div>

So scrap that idea, how about applying a border-radius to the canvas elements themselves?
<div id="tryTwo" class="test-div"></div>
Yeah, that seems to work in all browsers...(whew).  Whadda mess...

<div class="spacer"></div>

Cannot yet duplicate issue in JSFIDDLE
<div id="tryThree" class="test-div"></div>

CSS

.spacer {width: 100%; height: 40px;}
.test-div {width: 400px; height: 100px; border: 6px solid black; border-radius:50px;}

#tryOne {overflow:hidden;}
#tryTwo canvas {border-radius:44px;}
#tryThree {width: 400px; height: 166px;}
#tryThree canvas {border-radius:44px;}

JavaScript

// this jsfiddle links to the new KineticJS 4.2.0 CDN
// all thanks to Eric Rowell who friggen' rocks!
var arrContainers = ["problem", "tryOne", "tryTwo", "tryThree"];

// create canvas elements in each div
$.each(arrContainers, function(i, v) {
    var stage = new Kinetic.Stage({
        container: v,
        width: 400,
        height: 100
    });

    var layer = new Kinetic.Layer();

    var background = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 400,
        height: 100,
        fill: "green"
    });

    layer.add(background);
    stage.add(layer);

    layer = new Kinetic.Layer();

    background = new Kinetic.Rect({
        x: 5,
        y: 5,
        width: 390,
        height: 100,
        fill: "red"
    });

    layer.add(background);
    stage.add(layer);
});