Selection issues (printscreenshot)

by Arjan Haverkamp

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="canvasContainer">
<canvas id="c" width="400" height="300"></canvas>
</div>
<button type="button" onclick="setBorder()">change border width</button>
<button type="button" onclick="toggleFill()">toggle fill</button>

CSS

#canvasContainer {
	background: url(data:image/gif;base64,R0lGODlhCgAKAIAAAOLi4v///yH5BAAHAP8ALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==);
	border: 2px solid #eee;
	padding: 4px;
	border-radius: 5px;
}

JavaScript

var canvas;

function setBorder()
{
    var obj = canvas.getActiveObject();
    if (obj) {
        obj.set('strokeWidth', Math.max(1,Math.random()*10));
        canvas.renderAll();
    }
}

function toggleFill()
{
    var obj = canvas.getActiveObject();
    if (obj) {
        var color = obj.get('fill') === 'red' ? 'transparent' : 'red';
        obj.set('fill', color);
        canvas.renderAll();
    }
}

function init() 
{
    canvas = new fabric.Canvas('c');
    canvas.add(new fabric.Rect({
        left: 50,
        top: 50,
        width: 100,
        height: 100,
        fill: 'transparent',
        stroke: 'red',
        strokeWidth: 5
    }));
    canvas.add(new fabric.Rect({
        left: 200,
        top: 100,
        width: 50,
        height: 50,
        fill: 'transparent',
        stroke: 'red',
        strokeWidth: 5
    }));
    
    canvas.renderAll();

        
    
};

window.onload = function() {
  init();  
}