kineticjs user input to change text size

Question

I got 90% of the way through making a canvas for a mug designer with user image upload and text styling (colour, weight, font style etc..) but I couldn't get my head around a bug in my code.

now I'm using kinetic.js to make it and have a text field with keyup and want to link it to a user input to resize text, I have worked with canvas but am new to kinetics so an easy way to implement this would be helpful.

HTML:

<input type="text" id="textBox" placeholder="Your Text">
<br>Text Size:
<input type="range" id="textSize" min="4" max="100" step="1" value="30" />

js:

var text = new Kinetic.Text({
    x: 20,
    y: 30,
    text: '',
    fontSize: '30',
    fontFamily: 'Calibri',
    fill: 'black',
    draggable: true
});

document.getElementById("textBox").addEventListener("keyup", function () {
    text.setText(this.value);
    layer.draw();
}, true);

var stage = new Kinetic.Stage({
    container: 'container',
    width: 375,
    height: 200
});

var layer = new Kinetic.Layer();

    layer.add(text);
    stage.add(layer);

here's the full fiddle

I also need to have the "onLoad" image (of Yoda) to be inserted with the "imageLoader", so help on that would be good too. (will post as a separate question if necessary).

Any tips appreciated, thanks in advance

Answer 1

There are two decent options I can think of: adjusting the font size and adjusting the scale of the text element. Very similar in either case.

Font size:

document.getElementById("textSize").addEventListener("change", function() {
    var size = this.value;
    text.fontSize(size);
    layer.draw();
}, true);

Fiddle: http://jsfiddle.net/pDW34/8/

Scale:

document.getElementById("textSize").addEventListener("change", function() {
    var scale = this.value/100*4;
    text.scale({x: scale, y: scale});
    layer.draw();
}, true);

Fiddle: http://jsfiddle.net/pDW34/9/