$(document).ready(function() {
    var $canvas = $('canvas');
    var rect = {};
    var drawing = false;
    var trigger = $('.rect');

    function _makeRect() {
        var startX = $('.coordinate_x').val();
        var startY = $('.coordinate_y').val();
        var width = $('.rect_width').val();
        var height = $('.rect_width').val();

        $canvas.drawRect({
           fillStyle: '#000',
           draggable: true,
           fromCenter: false,
           x: startX, y: startY,
           width: width, height: height
        });

        console.log(startX, startY, width, height);
    }

    $('.make_rect').on('click', _makeRect);

    $canvas.on('mousedown', _mousedown);
    $canvas.on('mouseup', _mouseup);
    $canvas.on('mousemove', _drawing);

    function _mousedown(e) {
        drawing = true;
        var startX = e.pageX - $canvas.offset().left;
        var startY = e.pageY - $canvas.offset().top;
        rect.x = startX;
        rect.y = startY;
    }

    function _mouseup(e) {
        drawing = false;
    }

    function _drawing(e) {
        var currentX = e.pageX - $canvas.offset().left;
        var currentY = e.pageY - $canvas.offset().top;
        if(drawing) {
            $canvas.drawRect({
               fillStyle: '#000',
               layer: true,
               name: 'box',
               fromCenter: false,
               x: rect.x, y: rect.y,
               width: currentX - rect.x, height: currentY - rect.y
            });
        }
    }
});