KineticJS Dashed Line

by joshjs

HTML

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

CSS

#target {
    width: 200px;
    height: 200px;
    background-color: #eee;
}

JavaScript

var element = document.getElementById('target'),
    stage = new Kinetic.Stage({
        container: element,
        width: element.offsetWidth,
        height: element.offsetHeight
    }),
    layer = new Kinetic.Layer();

layer.add(new Kinetic.Line({
    points: [10, 10, 190, 190],
    stroke: 'black',
    strokeWidth: 1,
    dashArray: [5, 4]
}));
stage.add(layer);