HTML5 Canvas Example

by abdennour

HTML

<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script>
 <canvas id="canvas" width="380" height="320"></canvas> 
 <div style="float:right;">
   <span> clicked COLOR :</span> <span id="coll"></span>
 </div>
<button id="download">Download Pdf</button>

CSS

#canvas {
    
}
#background {
    display: none;
}
#ballon {
    position: absolute;
    top: 50px;
    left: 50px;
    cursor: move;
    opacity: 0.5;
}

JavaScript

$(document).delegate('#canvas','click',function(e){
         console.log(e);
        //var x = Math.floor((e.pageX-$("#canvas").offset().left) / 20);
      //  var y = Math.floor((e.pageY-$("#canvas").offset().top) / 20);
       var offset = $(this).offset();
       var dt=this.getContext('2d').getImageData(e.clientX , e.clientY , 1, 1).data;
       console.log(dt)
       if(isBlack(dt)){
       document.getElementById('coll').innerHTML='BLACK';
       }
       else{
              	document.getElementById('coll').innerHTML=dt[0]+','+dt[1]+','+dt[2];    
       }
       
       
    })
    
    function isBlack(dataPixel){
       if(dataPixel[0]==dataPixel[1] && dataPixel[1]==dataPixel[2] && dataPixel[2]===0 ){
          return true
       }else{return false;}
    }

$(document).ready(function() {

    var d_canvas = document.getElementById('canvas');
    var ctx = d_canvas.getContext('2d');
    ctx.moveTo(20, 20);
    ctx.lineTo(100, 20);
    ctx.fillStyle = "#999";
    ctx.beginPath();
    ctx.arc(100, 100, 75, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillStyle = "orange";     
    ctx.fillRect(20, 20, 50, 50);
    ctx.font = "96px Helvetica";
    ctx.fillStyle = "#000";
    ctx.fillText("A", 50, 130);
    $('#ballon').draggable();

    
    $('#download').click(function() {       
        html2canvas($("#canvas"), {
            onrendered: function(canvas) {         
                var imgData = canvas.toDataURL(
                    'image/png');              
                var doc = new jsPDF('p', 'mm');
                doc.addImage(imgData, 'PNG', 10, 10);
                doc.save('sample-file.pdf');
            }
        });
    });
});