how to add text area on canvas - Javascript Canvas

Javascript examples for Canvas:Text

  1. HOME
  2. Javascript
  3. Canvas
  4. Text

Description

how to add text area on canvas

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>SO-19877961</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"></script> 
      <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
      <style id="compiled-css" type="text/css">

#canvascolor input {
   height:50px;
   width:50px;
   border-width: 1px;
}


      </style> 
      <script type="text/javascript">
    $(function(){//w  w  w  .j  a  v  a  2s.c  o m
$(document).ready(function () {
    var imagesrc = "";
    $(".draggable").draggable({
        revert: true,
        drag: function (event, ui) {
            imagesrc = $(this).attr('src');
        }
    });
    $("#myCanvas").droppable({
        drop: function () {
            $('#myCanvas').css("background", "url(" + imagesrc + ")");
        }
    });
    $('#button_to_add').on('click', 'button', function () {
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var text = $('#write_whatever').val();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "#3e3e3e";
        ctx.font = "16px Arial";
        ctx.fillText(text, 20, canvas.height - 20);
    });
});
    });

      </script> 
   </head> 
   <body> 
      <canvas id="myCanvas" class="droppable" width="640" height="280"></canvas> 
      <section id="canvascolor"> 
         <img class="draggable" height="20" width="20" src="http://stuweb.cms.gre.ac.uk/~mkg01/web/PHP/getImage.php?id=138"> 
         <img id="blackcanvas" class="draggable" height="20" width="20" src="images/blackcanvas.jpg"> 
         <img id="yellowcanvas" class="draggable" height="20" width="20" src="http://2.imimg.com/data2/MB/BH/MY-651900/23-250x250.jpg"> 
         <img id="bluecanvas" class="draggable" height="20" width="20" src="http://jsfiddle.net/img/logo.png"> 
         <img id="redcanvas" class="draggable" height="20" width="20" src="http://imshopping.rediff.com/imgshop/450-450/shopping/pixs/14628/m/mjit085._small-size-teddy-bear-4u.jpg"> 
         <img id="greencanvas" class="draggable" height="20" width="20" src="https://www.gravatar.com/avatar/86364f16634c5ecbb25bea33dd9819da?s=128&amp;d=identicon&amp;r=PG&amp;f=1"> 
      </section> 
      <div id="text"> 
         <textarea id="write_whatever">Write 4 lines to describe yourself.</textarea> 
         <div id="button_to_add"> 
            <button type="button">Add</button> 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials