Feldmat

HTML

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<div              class="controls">
     <h3>Controls:</h3>

    <p>
        <label>Align:</label>
        <br />
        <select id="configurator-align">
            <option value="left">left</option>
            <option value="center">center</option>
            <option value="right">right</option>
        </select>
    </p>
    <p>
        <label>Font-size:</label>
        <br />
        <select id="configurator-fontsize">
            <!-- Values are given as pixels -->
            <!-- Approximate Conversion from Points to Pixels used -->
            <option value="16">12pt</option>
            <option value="19">14pt</option>
            <option value="22">16pt</option>
            <option value="24">18pt</option>
            <option value="26">20pt</option>
            <option value="29">22pt</option>
            <option value="32">24pt</option>
            <option value="35">26pt</option>
            <option value="37">28pt</option>
            <option value="40">30pt</option>
            <option value="45">34pt</option>
            <option value="48">36pt</option>
        </select>            
</div>

<canvas id="c"></canvas>

JavaScript

$j = jQuery.noConflict();

// Set canvas
var canvas = new fabric.Canvas('c');
canvas.selectionColor = 'rgba(255,0,0,1)';
canvas.selectionBorderColor = 'rgba(255,0,0,0.7)';
canvas.selectionLineWidth = 5;
canvas.backgroundColor = '#fff';
canvas.setHeight(500);
canvas.setWidth(500);

var canvasCenter = canvas.getCenter();

// Add background and position it in the center of canvas
var background_rec = new fabric.Rect({
    fill: 'lightblue',
    angle: 0,
    hasControls: false,
    originX: 'center',
    originY: 'center',
    lockMovementX: true,
    lockMovementY: true,
    selectable: false,
    left: canvasCenter["left"],
    top: canvasCenter["top"],
    width: 400,
    height: 225
});
canvas.add(background_rec);

// Position where the background starts
var zero_position_left = canvasCenter["left"] - background_rec.width/2;
var zero_position_top =  canvasCenter["top"] - background_rec.height/2;

var title_input = new fabric.IText('Custom Text', {
					fontFamily: 'arial black',
					fontStyle: 'normal',
					fontSize: $j('#configurator-fontsize').val(),
                    fill: 'red',
					hasControls: false,
					lockMovementX: false,
					lockMovementY: false,
					centerTransform: false,
					left: zero_position_left + 40,
					top: zero_position_top - 0.95*$j("#configurator-fontsize").val(),
					width: 300,
					height: 90
});
canvas.add(title_input);
canvas.sendToBack(title_input);


// Add input field for content1
var content1_input = new fabric.IText('Custom Content', {
					fontFamily: 'arial black',
					fontStyle: 'normal',
					fontSize: $j('#configurator-fontsize').val(),
                    fill: 'red',
					stroke: '#999',
					hasControls: false,
					lockMovementX: true,
					lockMovementY: true,
					left: zero_position_left + 70,
					top: zero_position_top + 60,
					width: 300,
					height: 80
});
canvas.add(content1_input);

canvas.renderAll();


// Canvas actions
// Change text-align
$j("#configurator-align").change(function() {
    //...