how to add text area on canvas - Javascript Canvas

Javascript examples for Canvas:Text


how to add text area on canvas

Demo Code

ResultView the demo in separate window

      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src=""></script> 
      <script type="text/javascript" src=""></script> 
      <style id="compiled-css" type="text/css">

#canvascolor input {
   border-width: 1px;

      <script type="text/javascript">
    $(function(){//w  w  w  .j  a  v  a  2s.c  o m
$(document).ready(function () {
    var imagesrc = "";
        revert: true,
        drag: function (event, ui) {
            imagesrc = $(this).attr('src');
        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);

      <canvas id="myCanvas" class="droppable" width="640" height="280"></canvas> 
      <section id="canvascolor"> 
         <img class="draggable" height="20" width="20" src=""> 
         <img id="blackcanvas" class="draggable" height="20" width="20" src="images/blackcanvas.jpg"> 
         <img id="yellowcanvas" class="draggable" height="20" width="20" src=""> 
         <img id="bluecanvas" class="draggable" height="20" width="20" src=""> 
         <img id="redcanvas" class="draggable" height="20" width="20" src=""> 
         <img id="greencanvas" class="draggable" height="20" width="20" src=";d=identicon&amp;r=PG&amp;f=1"> 
      <div id="text"> 
         <textarea id="write_whatever">Write 4 lines to describe yourself.</textarea> 
         <div id="button_to_add"> 
            <button type="button">Add</button> 

Related Tutorials