fabric js example

HTML

<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="c"></canvas>

<br>
<ul class='accordion'>
  <li>
       <input type="radio" name="a" id="cp-1" class="men" checked="checked">
      <label class="test" for='cp-1'>
         <img src="http://fostcard.com/img/color.png"> 
          
          Kleur</label>

      <div class="content">
<input type="radio" name="kleur" id="f00" class="jq-ui-forms"><label class="k" for="f00" style="background:#f00;"></label>
<input type="radio" name="kleur" id="f0f" class="jq-ui-forms"><label class="k" for="f0f" style="background:#f0f;"></label>
<input type="radio" name="kleur" id="00f" class="jq-ui-forms"><label for="00f" style="background:#00f;"></label>
<input type="radio" name="kleur" id="ff8000" class="jq-ui-forms"><label for="ff8000" style="background:#ff8000"></label><input type="radio" name="kleur" id="8000ff" class="jq-ui-forms"><label for="8000ff" style="background:#8000ff"></label><input type="radio" name="kleur" id="fff" class="jq-ui-forms"><label for="fff" style="background:#fff"></label>

      </div>
  </li>
  

          
          <li>
      <input type='radio' name='a' id='cp-2'>
      <label class="test" for='cp-2'><img src="http://fostcard.com/img/font.png"> Lettertype</label>

      <div class='content'>

<ul class='sublist'>
    <li>
        <input type='radio' name='lettertype' id='Arial'>
            <label class="test sub"for="Arial">
                <font face="arial"> Arial</font></label>
        
    </li>
     <li>
         <input type='radio' name='lettertype' id='Verdana'>
             <label class="test sub" style="font-family:verdana;" for='Verdana'  ><font face="verdana"> Verdana</font></label>      
    </li>
         
         
         <li>
         <input type='radio' name='lettertype' id='Times new roman'>
             <label class="test sub" style="font-family:verdana;" for='Times new roman'  ><font face="Times new roman"> Times new roman</font></label>      
    </li>
</ul> ...

CSS

ul.accordion, ul.sublist {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
  width:100%; 
}

ul {
        display: block;
}

ul li {
  width:100%;    
  margin: 0;
  padding: 0;
}

ul li img {
    vertical-align: middle;
}

ul.accordion input[type='radio'], input[type='checkbox'] {
  display: none;

}

.test {
	    display:block;
	    width:100%; height:48px;
	    font-family: Helvetica, Arial, sans-serif;
	    font-weight:bold;
	    font-size:18px;
	    line-height:48px;
	    text-decoration:none;
	    border-bottom:1px solid white;
	    color:#fff;
	    padding-left:8px;
	    padding-right:-80px;
        background:#39424b;
        margin: 0;
        padding: 7px;
    } /* A touchable, interactive list item. */

    label.test:after {
	    content:">";
	    position:absolute;
	    right:15px;
    }
.test.sub {
    diplay: block;
    background:#595D61;
    width: 100%;
    margin: 0;
    padding: 0;
}
.test.sub:after {
    content:"";   
}

.content {
    display: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background:#595D61;

}

#cp-4 {
    display: none;
}

    input.jq-ui-forms[type=checkbox] ,input.jq-ui-forms[type=radio]  {
	    position: relative;
	    left: 0;
	    -webkit-appearance: none;
	    opacity:0;
	    margin-bottom:0px;
	    width:0px;
	    display:none;
    } /* Blocks rendering of the native radio controls. */

    input.jq-ui-forms[type=checkbox] + label,input.jq-ui-forms[type=radio] + label { 
	    float:left;
	    font-size:15px;
	    font-weight:bold;
	    line-height:26px; /* changing this value will change the vertical relationship to the radios & checkboxes. */
	    margin-left:10px;
	    padding-left:30px;
	    background-repeat:none;
	    height:25px;
	    margin-top: 4px;
        margin-bottom: 4px;
    } /* Styling for the labels. */


ul.accordion label:hover {
  cursor: pointer;
}

/* Show the content boxes when the radio buttons are checked */
ul.accordion...

JavaScript

var canvas = new fabric.Canvas('c');

var text = new fabric.Text("Text", {
    fontSize: 70,
    selectable: false,
    left: 200,
    top: 100,
    fill: '#f00' 
});
canvas.add(text);


// TODO: kleur selectie onder een gezamelijke div laten vallen. Daarna alleen par. aanpassen.
// Kleur select
    radios = document.getElementsByName("kleur");
    for(var i = 0, max = radios.length; i < max; i++) {
        radios[i].onclick = function() {
            text.set('fill', "#" + this.id);
            canvas.renderAll();
        }
    }

// Border select
    radios2 = document.getElementsByName("border");  // wijzig naar button
    for(var i = 0, max = radios2.length; i < max; i++) {
        radios2[i].onclick = function() {
            //alert("joo");
           // document.getElementById("voorbeeld").style.size = "64px";
            text.set('strokeWidth', 4);
            text.set('stroke', this.id);
            canvas.renderAll();
        }
    }

    radios4 = document.getElementsByName("lettertype");  // wijzig naar button
    for(var i = 0, max = radios4.length; i < max; i++) {
        radios4[i].onclick = function() {
            text.set('fontFamily', this.id);
            canvas.renderAll();
        }
    }

    //fontFamily

    radios3 = document.getElementsByName("fonttype");  // wijzig naar button
    for(var i = 0, max = radios3.length; i < max; i++) {
        radios3[i].onclick = function() {
            
            if(document.getElementById(this.id).checked == true) {
                if(this.id == "bold") {
                    text.set("fontWeight", this.id);
                }
                if(this.id == "italic") {
                    text.set("fontStyle", this.id);
                }
                if(this.id == "underline") {
                    text.set("textDecoration", this.id);
                }
                
                
                
            } else {
                if(this.id == "bold") {
                   ...