title: Write custom text on mug from user by keyboard by Javascript, Html5
body: <p>I want to write text on mug.And change property like font-style, color, size by Javascript, Html5. Right now i am using Javascript, Html5.
  <a href="https://i.stack.imgur.com/H0dzN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H0dzN.png" alt="enter image description here"></a></p>
  
  <p>I want to write text on this mug image and also want to change font color, font-size, font style and rotate text. <br>
  I seen this link but i am not satisfied.
  <a href="https://stackoverflow.com/questions/3697615/how-can-i-write-text-on-a-html5-canvas-element">How can I write text on a HTML5 canvas element?</a>
  I can't give you original code. I have a sample code for this page.</p>
  
  <p>HTML CODE:</p>
  
  <pre><code>  &lt;body&gt;
      &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>JAVASCRIPT CODE:</p>
  
  <pre><code>$(function () {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  
  var productImg = new Image();
  productImg.onload = function () {
      var iw = productImg.width;
      var ih = productImg.height;
      console.log("height");
  
      canvas.width = iw;
      canvas.height = ih;
  
      ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height,
                    0, 0, iw, ih);
  
      //start();
  
      // outline
      ctx.beginPath();
       ctx.moveTo(88, 235.734375);
       ctx.bezierCurveTo(88, 234.734375, 204, 298, 327, 234.734375);
       ctx.stroke();
  };
  productImg.src = "https://d2z4fd79oscvvx.cloudfront.net/0018872_inspirational_teacher_mug.jpeg";
  
  var img = new Image();
  img.onload = start;
  img.src = "http://blog.foreigners.cz/wp-content/uploads/2015/05/Make-new-friends.jpg";
  var pointer = 0;
  
  
  function start() {
  
      var iw = img.width;
      var ih = img.height;
  
      var xOffset = 125,
          yOffset = 122;
  
      var a = 122.0;
      var b = 30.0;
  
      var scaleFactor = iw / (2*a);
  
      // draw vertical slices
      for (var X = 0; X &lt; iw; X+=1) {
        var y = b/a * Math.sqrt(a*a - (X-a)*(X-a)); // ellipsis equation
        ctx.drawImage(img, X * scaleFactor, 0, 6, ih, X + xOffset, y + yOffset, 1, ih - 605 + y/2);
      }
  }
  </code></pre>
  
  <p>});</p>
  
  <p>I am only using Javascript, Html5. I have seen this link <a href="http://varunpes.net46.net/Fancy_Product_Designer_V3.0.7/example/cust-txt.jsp" rel="nofollow noreferrer">http://varunpes.net46.net/Fancy_Product_Designer_V3.0.7/example/cust-txt.jsp</a>
  But this plugin have use in Php. I don't want this functionality in Php.
  Anybody have any idea please share with me. If Any body have different idea than also share with me.   </p>