pattern on retina display

by SooChangLee

HTML

<script src="https://s3.ap-northeast-2.amazonaws.com/js-fiddle/3.5.0/fabric.min.js"></script>
	<div id="div_pattern_result">
		canvas_pattern_result<br>(enableRetinaScaling: true)<br>
		<canvas id="canvas_pattern_result"></canvas>
	</div>

	<div id="div_pattern_source">
		<div>
			canvas_pattern_source<br>(enableRetinaScaling: true)<br>
			<canvas id="canvas_pattern_source"></canvas>
		</div>

		Select pattern
		<select id="combo_pattern_type">
		<option value="https://js-fiddle.s3.ap-northeast-2.amazonaws.com/1px+pattern.svg" selected>Stripe(1px) pattern</option>
		<option value="https://js-fiddle.s3.ap-northeast-2.amazonaws.com/1px+pattern+diagonal.svg">Stripe diagonal(1px) pattern</option>
		<option value="https://s3.ap-northeast-2.amazonaws.com/js-fiddle/1558429751231_2710_29.svg">Normal pattern1</option>
		<option value="https://s3.ap-northeast-2.amazonaws.com/js-fiddle/1558429751231_27133_33.svg">Normal pattern2</option>
		<option value="https://s3.ap-northeast-2.amazonaws.com/js-fiddle/1558429751231_274_39.svg">Normal pattern3</option>


		</select>

		<br>

		pattern height
		<select id="combo_pattern_source_scale_height">
		</select>
		<br>
		<button id="btn_scale_up">Scale up<br>+50px</button>
		<br>
		<button id="btn_scale_down">Scale down<br>-50px</button>
	</div>

CSS

html, body {
			margin:0px;
		}

		#div_pattern_result{
			width:50%;
			float: left;
		}

		#div_pattern_source{
			width:50%;
			float: left;
		}

		canvas {
			border: 1px solid #ccc;
		}

		#btn_scale_up, #btn_scale_down{
			width: 80px;
			height: 80px;
		}

JavaScript

//Init fabric canvas
        var canvas_pattern_result = new fabric.Canvas('canvas_pattern_result', {
			width: $("#div_pattern_result").width(),
			height: 500,
            enableRetinaScaling: true
		});

        var canvas_pattern_source = new fabric.StaticCanvas('canvas_pattern_source', {
            enableRetinaScaling: true
		});

        var group_svg_pattern_source = undefined;
		var rect_pattern_result = undefined;

        //Init pattern height combo box
        var combo_pattern_source_scale_height = $("#combo_pattern_source_scale_height");
        for(var i=50 ; i<=5000 ; i=i+50){
            var option = $('<option/>');
            option.attr({ 'value': i }).text(i);

            combo_pattern_source_scale_height.append(option);
        }

        $("#combo_pattern_source_scale_height option[value=150]").prop("selected", true);

        //Event listener
        $("#combo_pattern_type").on("change", function(){
            if( rect_pattern_result != undefined ){
                canvas_pattern_result.remove(rect_pattern_result);
                rect_pattern_result = undefined;
			}

            if( group_svg_pattern_source != undefined ){
                canvas_pattern_source.remove(group_svg_pattern_source);
                group_svg_pattern_source = undefined;
			}

            fabric.loadSVGFromURL(this.value, function(objects, options) {
                group_svg_pattern_source = fabric.util.groupSVGElements(objects, options);
                group_svg_pattern_source.setOptions({
                    id: "group_svg_pattern_source"
                });
                group_svg_pattern_source.scaleToHeight(150);

                $("#combo_pattern_source_scale_height option[value=150]").prop("selected", true);

                group_svg_pattern_source.setCoords();

                canvas_pattern_source.add(group_svg_pattern_source);
                canvas_pattern_source.renderAll();

                var pattern = new fabric.Pattern({
                 ...