JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<h4>Use clip to keep text from overflowing</h4>
<div id="container"></div>

CSS

body {
    padding:20px;
}
#container {
    border:solid 1px #ccc;
    margin-top: 10px;
    width:350px;
    height:350px;
}

JavaScript

var stage = new Kinetic.Stage({
    container: 'container',
    width: 350,
    height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);

var group = new Kinetic.Group({
    width: 150,
    height: 50,
    clip: [0, 0, 150, 50]
});
layer.add(group);

var rect = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: group.getWidth(),
    height: group.getHeight(),
    fill: "skyblue"
});
group.add(rect);

var text = new Kinetic.Text({
    x: 5,
    y: 20,
    text: "Rudolph the Red Nosed Reindeer...",
    fill: 'red',
});
group.add(text);

layer.draw();