drag error

by kzhdev

HTML

<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/805914/kinetic.js"></script>
<div id="canvasDiv"></div>
<img id="hit" src=""/>

CSS

#canvasDiv {
    border: solid 1px grey;
}

JavaScript

var stage = new Kinetic.Stage({
    container: 'canvasDiv',
    width: 400,
    height: 200,
    draggable: false,
    pixelRatio : 1
});

var layer = new Kinetic.Layer();
var mouseDownPos = null;
var rect = null;

stage.add(layer);
stage.on('contentMousedown', function(e) {
    console.log('content mouse down');
    mouseDownPos = stage.getPointerPosition();
});

stage.on('contentMousemove', function(e) {
    var mousePos = stage.getPointerPosition();
    if (mouseDownPos) {
        if (!rect) {
            rect = new Kinetic.Rect({
                x: mouseDownPos.x,
                y: mouseDownPos.y,
                width: mousePos.x - mouseDownPos.x,
                height: mousePos.y - mouseDownPos.y,
                fill: 'aqua',
                opacity: 0.3
            });
            layer.add(rect);
        } else {
            rect.setWidth(mousePos.x - mouseDownPos.x);
            rect.setHeight(mousePos.y - mouseDownPos.y);
        }
        layer.batchDraw();
    }
});

stage.on('contentMouseup', function(e) {
    console.log('content mouse up');
    mouseDownPos = null;
    rect.destroy();
    layer.draw();
});

document.getElementById("hit").src = layer.getHitCanvas().toDataURL();