CodePen

HTML

            
              <script src='http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.1.min.js'></script>  
<div id="containerCreator" style="float:left"></div>
  <div id="wrapperInputCreator"style="float:left" >
 
 
  <div id="pictureWrapperCreator" style="margin:10px; ">
      <img width="100" height="100" name="0.jpg" src="http://imagesbook.eu/images/creator/0.jpg"/>
  <img width="100" height="100" src="http://imagesbook.eu/images/creator/1.jpg"/>
   <img width="100"  src="http://cdn.memegenerator.net/images/500x/2485.jpg"/>
  </div>
    <input id="generate" type="submit" value="Create" />
    <div  style="width:200px; height:200px; background:#dddddd" id="text"></div>
            
          
!

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
                $(document).ready(function(){
  var imageSource = $('#pictureWrapperCreator img').first().attr('src'); 
  var textVrch = '';
  var imageWidth;
  var imageHeight;
    
  imageHeight = 500;
  imageWidth = 500;
  
	var stage = new Kinetic.Stage({
    container: 'containerCreator',
    width: imageWidth,
    height: imageHeight
    });
	
    var layer = new Kinetic.Layer();

    var imageObj = new Image();
    imageObj.onload = function(){
      var yoda = new Kinetic.Image({
        x: 0,
        y: 0,
        image: imageObj,
        width: 200,
        height: 200
      });
	  

   
      layer.add(yoda);
	  
      stage.add(layer);  
	  
    
   $('#pictureWrapperCreator img').click(function(){
	    
	    imageSource = $(this).attr('src');
		imageObj.src = imageSource;
		
		
	    vrchnyText.setText($('#vrchCreator').val().toUpperCase());
        spodnyText.setText($('#spodokCreator').val().toUpperCase());
        layer.draw();
		
	  });
	  
	$('#generate').click(function(){
	     stage.toDataURL({
          callback: function(dataUrl) {
            
            $('#test').html('<img src="'+dataUrl + '"/>');//it does not work :(

          }
          });
	   });    
    
      
     
      };
      
	  
	   
	  imageObj.src = imageSource;
	  
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................