Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="settings">
  <p><button id="reset">Reset defaults</button></p>
  <table >
    <tr>
      <td class="structure">
        <table id="settingsTable" >

          <tr>
            <th colspan="2" class="header" >
              Stage
            </th>
          </tr>
          <tr>
            <td>
              <label for="stageScale">Scale</label>
            </td>
            <td>
              <select id="stageScale">
                <option>1</option>
                <option selected>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>15</option>
                <option>20</option>
              </select>
            </td>
          </tr>

          <tr>
            <th colspan="2" class="header" >
              Text shape size
            </th>
          </tr>
          <tr>
            <td colspan="2">
              <label for="boxWidth">Width</label>
              <input id="boxWidth" type="range" min="0" max="150" value="20">
              <span class="rangeInfo" id="boxWidthVal">200</span>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <label for="boxHeight">Height</label>
              <input id="boxHeight" type="range" min="0" max="500" value="250">
              <span class="rangeInfo" id="boxHeightVal">200</span>
            </td>
          </tr>

        
          
          <tr>
            <th colspan="2" class="header">
              Word wrap
            </th>
          </tr>

          <tr>
            <td colspan="2" style="text-align: left;">
              <input type="radio" id="wrap-word" name="wordWrap" value="word" class="wrap" checked="checked" />
              <label for="wrap-word">Word</label>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="text-align: left;">
              <input type="radio" id="wrap-char" name="wordWrap" value="char" class="wrap" />
              <label for="wrap-char">Char</label>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="text-align: left;">
              <input type="radio" id="wrap-none" name="wordWrap" value="none" class="wrap" />
              <label for="wrap-none">None</label>
            </td>
          </tr>          
          
          <tr>
            <th colspan="2" class="header">
              Horizontal Align
            </th>
          </tr>
          <tr>
            <td colspan="2" style="text-align: left;">
              <input type="radio" id="halign-left" name="halign" value="left" class="halign" checked="checked" />
              <label for="halign-left">Left</label>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="text-align: left;">
              <input type="radio" id="halign-center" name="halign" value="center" class="halign" />
              <label for="halign-center">Center</label>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="text-align: left;">
              <input type="radio" id="halign-right" name="halign" value="right" class="halign" />
              <label for="halign-right">Right</label>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="text-align: left;">
              <input type="radio" id="halign-justify" name="halign" value="justify" class="halign" />
              <label for="halign-justify">Justify</label>
            </td>
          </tr>

          <tr>
            <th colspan="2" class="header">
              Vertical Align
            </th>
          </tr>
          <tr>
            <td colspan="2" style="text-align: left;">
              <input type="radio" id="valign-top" name="valign" value="top" class="valign" checked="checked" />
              <label for="valign-top">Top</label>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="text-align: left;">
              <input type="radio" id="valign-middle" name="valign" value="middle" class="valign" />
              <label for="valign-middle">Middle</label>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="text-align: left;">
              <input type="radio" id="valign-bottom" name="valign" value="bottom" class="valign" />
              <label for="valign-bottom">Bottom</label>
            </td>
          </tr>
       
          
        </table>
      </td>
      <td class="structure">
        <table id="settingsTable1" >

            <tr>       
                <th colspan="2" class="header">
                Fonts
                </th>
            </tr>

            <tr>
                <td>
                <label for="fontName">Name</label>
                </td>
                <td>
                <select id="fontName">
                    <option >Arial</option>
                    <option selected>Georgia</option>
                </select>
                </td>
            </tr>  

            <tr>
                <td>
                <label for="fontSize">Size Px</label>
                </td>
                <td>
                <select id="fontSize">
                    <option>6</option>
                    <option >10</option>
                    <option>12</option>
                    <option selected>16</option>
                    <option>32</option>
                    <option>48</option>
                </select>
                </td>
            </tr> 
                
            <tr>
                <th colspan="2" class="header">
                    Font style
                    </th>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: left;">
                    <input type="checkbox" id="bold" class="fontstyle" value="bold" />
                    <label for="bold">Bold</label>
                    </td>
                </tr> 
                <tr>
                    <td colspan="2" style="text-align: left;">
                    <input type="checkbox" id="italic" class="fontstyle" value="italic" />
                    <label for="italic">Italic</label>
                    </td>
                </tr>               

                <tr>
                    <th colspan="2" class="header">
                    Text decoration
                    </th>
                </tr>        
                <tr>
                    <td colspan="2" style="text-align: left;">
                    <input type="checkbox" id="lineThrough" class="show" value="line-through" />
                    <label for="lineThrough">Line-through</label>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: left;">
                    <input type="checkbox" id="underline" class="show" value="underline" />
                    <label for="underline">Underline</label>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: left;">
                    <input type="checkbox" id="ellipsis" class="show" />
                    <label for="ellipsis">Ellipsis</label>
                    </td>
                </tr>   
            

                <tr>
                    <th colspan="2" class="header">
                    Padding
                    </th>
                </tr>
                <tr>
                    <td colspan="2">
                    <input id="boxPadding" type="range" min="0" max="20" value="0">
                    <span class="rangeInfo" id="boxPaddingVal">0</span>
                    </td>
                </tr>

                <tr>
                    <th colspan="2" class="header">
                    Line height
                    </th>
                </tr>
                <tr>
                    <td colspan="2">
                    <input id="boxLineHeight" type="range" min="0" max="30" value="10">
                    <span class="rangeInfo" id="boxLineHeightVal">10</span>
                    </td>
                </tr>             
            </table>
        </td>


      <td style="vertical-align: top;  width: 100%;" class="structure"  >
        <div id="container"></div>
      </td>
    </tr>
    
             


    
  </table>

  
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/konva@8/konva.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script> 
              
            
!

CSS

              
                body {
  overflow: scroll;
  background-color: #f0f0f0;
  font-family: Arial;  
  font-size: 10pt;
  font-weight: 'normal';
}
#settingsTable {
  width: 200px;
}
#settings {
  display: inline-block;
  height: 100%;
  padding: 2px;  
  overflow: scroll;
}
#container {
  height: 100%;
  width: 100%;
  padding: 2px;
}
th {
  text-align: left;
  padding-top: 5px;
  background-color: silver;
}
td {
  padding-left:15px;
}
td.structure {
  padding: 0;
  vertical-align: top;
}
#phrase {
  width: 120px;
  height: 200px;
}
input[type=range] {
  width: 100px;
}
.rangeInfo {
  font-size: 0.8em;
  font-family: Arial;
  position: relative;
  top: -4px;
}
.header {
  padding-left:5px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 12pt;
  background-color: silver;

}
              
            
!

JS

              
                // no protect
const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);

let ipsumShortString = `Lorem ipsum dolor sit amet, consectetur adipis-cing elit. Nulla non wombat sem, quis scelerisque augue.\n\nPellentesque porttitor augue vel justo efficitur malesuada. Aliquam tempor congue eleifend. Maecenas erat orci, aliquam vel nunc ut, gravida gravida magna.\n\nSed a laoreet urna. Cras non metus rhoncus, convallis erat sed, cursus nisl. Donec dolor enim, mollis id rutrum eu, tincidunt nec erat.`;

// Add some simple text
let t = new Konva.Text({
      //  x: 20, y: 20,
        text: ipsumShortString,
        fontFamily: 'Georgia',
        fontSize: 16,
        fontStyle: '',
        width: 448,
     //   height: 95,
  draggable: true
      }),
    r = new Konva.Rect({
   //   x: 20, y: 20,
      width: t.width(),
      height: t.height(),
      strokeWidth: 0.5,
      stroke: 'blue'
      })
layer.add(r, t);

layer.draw();

function go(opts){
  
  // Interpret the sliders for width and height into usable values.
  let bw = $('#boxWidth').val() * 10;
  bw = (bw === 0 ? undefined : bw);  
  $('#boxWidthVal').html(bw);
  $('#boxHeightVal').html($('#boxHeight').val());

  let bh = parseInt($('#boxHeight').val());
  bh = (bh === 0 ? undefined : bh);
  
  // Get the padding and line height values
  $('#boxPaddingVal').html($('#boxPadding').val());
  let lh = parseInt($('#boxLineHeight').val()) / 10;
  $('#boxLineHeightVal').html(lh);
 
  // Get the line-thru, underline and ellipsis values
  let lt = $("#lineThrough:checked").val() ? $("#lineThrough").val() : '';
  let ul = $("#underline:checked").val() ? $("#underline").val() : '';
  let ellipsis = $("#ellipsis:checked").val() ? $("#ellipsis").val() : '';
  
  // Get the bold and italic values
  let fontStyleBold, fontStyleItalic = '';
  fontStyleBold = $("#bold:checked").val() ? $("#bold:checked").val() : '';
  fontStyleItalic = $("#italic:checked").val() ? '' + $("#italic:checked").val() : '';  
  
  
  // Set Konva stage scale
  stage.scale({x: $("#stageScale").val(), y: $("#stageScale").val()});
  
  // Set Konva.Text font parameters
  t.fontFamily($("#fontName").val());
  t.fontSize($("#fontSize").val());
  
  // Set Konva.Text size parameters
  t.width(bw);
  t.height(bh);

  // Set Konva.Text padding & line height parameters
  t.padding(parseInt($('#boxPadding').val()));
  t.lineHeight(lh);

  // Set Konva.Text align and wrap parameters
  t.align($(".halign:checked").val());
  t.verticalAlign($(".valign:checked").val());
  t.wrap($(".wrap:checked").val());
  
  // Set Konva.Text line-thru, underline and ellipsis parameters 
  t.textDecoration(lt + ' ' + ul)
  t.ellipsis(ellipsis);
  

  // Set  Konva.Text fontStyle parameter for bold & italic  
  t.fontStyle(fontStyleBold + ' ' + fontStyleItalic)

  // Set the blue boundary rect size - note there is no automatic border for a Konva.Text object.  
  r.setAttrs({
    width: t.width(),
    height: t.height()
  });
  
  // Ask for an efficient redraw with all changes applied.
  layer.batchDraw();
  
}

// Event listener for sliders - refresh parameters when change occurs.
$('input[type=range]').on('mouseup input', function(e){

  go();
    
})

// Event listener for other inputs - refresh parameters when change occurs.
$('select,input').on('change', function(){
  go();
});

// Event listener for click event of the reset button - reset to defaults.
$('#reset').on('click', function(){
  
  $("#stageScale").val(2);
  $('#boxWidth').val(20);
  $('#boxHeight').val(250);
  
  $("#bold").prop("checked", false);
  $("#italic").prop("checked", false);

  $("#lineThrough").prop("checked", false);
  $("#underline").prop("checked", false);
  $("#ellipsis").prop("checked", false);

  $("#wrap-word").prop("checked", true);
  
  $("#halign-left").prop("checked", true);
  $("#valign-top").prop("checked", true);
  
  $('#boxPadding').val(0);
  $('#boxLineHeight').val(10)
  
  $('#fontName').val('Georgia')
  $('#fontSize').val(16)
  
  go();
})

// Initial call to draw the output.
go();


// Load the web fonts from Google.
 WebFont.load({
    google: { 
      families: [
        'Anton',
        'Bad Script',
        'Catamaran', 
        'Droid Sans', 
        'Droid Serif', 
        'Hammersmith One',  
        'Hanalei', 
        'IM Fell Double Pica',
        'Lobster',
        'Merriweather',
        'Noto Sans JP', 
        'Open Sans', 
        'Pangolin',
        'Roboto', 
        'Shadows Into Light',
        'Stalinist One',
        'Ubuntu',
        'Ultra'
      ] 
    },
   // called when the load of an individual font commences.
    fontloading: function(familyName, fvd) {
      console.log('Loading font [' + familyName + ']')
    },
   // called when the load of an individual font completes.
    fontactive: function(familyName, fvd) {
      console.log('Loaded font [' + familyName + ']')
      $('#fontName').append('<option value="' + familyName + '">' + familyName + '</option>'); 
    },
  }); 
              
            
!
999px

Console