Kinetic canvas with user text field input

Question

I've pulled out most of my hair trying to find a solution to no avail. I know this must be easy but being a javascript neophyte I can't seem to wrap my head around it and am hoping someone can help me out!!!

I'm trying to create a simple canvas element that has an image with text (with wrapping) on top of it. The text will come from a text field outside of the canvas (nothing fancy). I've seen where the canvas populates with the text as it is input into the text field which is what I'm looking for (no submit button). Eventually, I will need to add 2 additional text fields with different information, doing the same thing but for right now I'd be happy to get one to work!

The kinetic text tutorial found here (http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-text-tutorial/ - code below) would be perfect if I could only figure out how to get the "complex text" to be pulled from a regular text input field instead of being hard coded!

Any help would be greatly appreciated!

Working code without input text field:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 220
      });
      var layer = new Kinetic.Layer();

      var simpleText = new Kinetic.Text({
        x: stage.getWidth() / 2,
        y: 15,
        text: 'Simple Text',
        fontSize: 30,
        fontFamily: 'Calibri',
        fill: 'green'
      });

      // to align text in the middle of the screen, we can set the
      // shape offset to the center of the text shape after instantiating it
      simpleText.setOffset({
        x: simpleText.getWidth() / 2
      });

      // since this text is inside of a defined area, we can center it using
      // align: 'center'
      var complexText = new Kinetic.Text({
        x: 100,
        y: 60,
        text: 'COMPLEX TEXT\n\nAll the world\'s a stage, and all the men and women merely players. They have their exits and their entrances.',
        fontSize: 18,
        fontFamily: 'Calibri',
        fill: '#555',
        width: 380,
        padding: 20,
        align: 'center'
      });

      var rect = new Kinetic.Rect({
        x: 100,
        y: 60,
        stroke: '#555',
        strokeWidth: 5,
        fill: '#ddd',
        width: 380,
        height: complexText.getHeight(),
        shadowColor: 'black',
        shadowBlur: 10,
        shadowOffset: [10, 10],
        shadowOpacity: 0.2,
        cornerRadius: 10
      });

      // add the shapes to the layer
      layer.add(simpleText);
      layer.add(rect);
      layer.add(complexText);
      stage.add(layer);

    </script>
  </body>
</html>

Anto Jurković · Answer 1 · 2013-12-10T12:37:19.727

Possible solution: to add one input field, set up event listener which fire on change of its value and then start drawing.

  <body>
    <div id="container"></div>

    <input type="text" id='complexText' size="20"/>

    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>

    <script defer="defer">

    var inputField = document.getElementById('complexText');
    inputField.addEventListener('change', function() {
            var inputText = this.value;
            showText(inputText);
        }, false);

    function showText(inputText) {

         *** here goes all your 'Kinetic' code ***
    }

See example at jsBin.

@user3071695: updated with example in jsBin so you can check the code — Anto Jurković, Dec 10 '13 at 12:38

Kinetic canvas with user text field input

1 Answers1