Write custom text on mug from user by keyboard by Javascript, Html5

Question

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.

I want to write text on this mug image and also want to change font color, font-size, font style and rotate text.
I seen this link but i am not satisfied. How can I write text on a HTML5 canvas element? I can't give you original code. I have a sample code for this page.

HTML CODE:

  <body>
    <canvas id="canvas"></canvas>
  </body>

JAVASCRIPT 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 < 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);
    }
}

});

I am only using Javascript, Html5. I have seen this link http://varunpes.net46.net/Fancy_Product_Designer_V3.0.7/example/cust-txt.jsp 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.

Please include some code. Is the mug a or in a – Reinard Dec 18 '15 at 11:01 — Reinard, Dec 18 '15 at 11:01

score 0 · Accepted Answer · answered May 19 '16 at 05:16

Write custom text in canvas with fabric js library.

var canvas = new fabric.Canvas('canvas');
$('#font').change(function(){
  var obj = canvas.getActiveObject();
  if(obj){
    obj.setFontFamily($(this).val());
  }
  canvas.renderAll();
});

function addText() {
  var oText = new fabric.IText('Tap and Type', { 
    left: 100, 
    top: 100 ,
  });

  canvas.add(oText);
  canvas.setActiveObject(oText);
  $('#fill, #font').trigger('change');
  oText.bringToFront();
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>


<div class="container">
<div class="row">
<div class="col s12">

<button class="btn" onclick="addText()">Add Custom Text</button>

<select class="browser-default"  id="font">
  <option>arial</option>
  <option>tahoma</option>
  <option>times new roman</option>
</select>
<br />
<canvas id="canvas" width="750" height="550" style="border:1px solid #333"></canvas>

</div>
</div>
</div>

Write custom text on mug from user by keyboard by Javascript, Html5

1 Answers1