i'm working on html5/canvas online stamp creation project.my code working displaying top circular , bottom circular text.i have problem displaying center text.its overlapping after type 4 letters.and want increase radius of circle(including top/bottom texts) on type of center text..here fidddle http://jsfiddle.net/apsvaeoa/..also find attached screenshot.
.
<!doctype html> <html> <head> <style> </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <body> <canvas id="canvas1" width="600" height="400" style="float:left;"></canvas> <div style="float: left; width: 538px;"> <label style="padding-right: 51px;">text-top:</label> <input type="text" id="text_cnv" size="40" maxlength="" /> <button id="text_cnv3" style="visibility:hidden"> delete </button> <label style="padding-right: 32px;">text-bottom:</label> <input type="text" id="text_cnv2" size="40" maxlength="" /> <button id="text_cnv4" style="visibility:hidden"> delete </button> <label style="padding-right: 32px;">text-horizontal:</label> <input type="text" id="text_horizontal"/> </div> <script> var ctx = document.getelementbyid('canvas1').getcontext('2d'); var r = 50; var space = math.pi / 12; ctx.font = "bold 30px courier"; document.getelementbyid('text_cnv').onkeyup = function() { var textlength = (this.value.length); if (textlength > 5) { radiuschaninging = r + (textlength * 3); } else { radiuschaninging = r + (textlength); } textcircle(this.value, 150, 150, radiuschaninging, space, 1); document.getelementbyid('text_cnv3').style.visibility = 'visible'; } document.getelementbyid('text_cnv2').onkeyup = function() { var textlength = (this.value.length); if (textlength > 5) { radiuschaninging = r + (textlength * 3); } else { radiuschaninging = r + (textlength); } textcircle(this.value, 150, 150, radiuschaninging, space); document.getelementbyid('text_cnv4').style.visibility = 'visible'; } document.getelementbyid('text_cnv3').onclick = function() { textcircle('', 150, 150, 0, space, 1); $("#text_cnv").val(''); } document.getelementbyid('text_cnv4').onclick = function() { textcircle('', 150, 150, 0, space); $("#text_cnv2").val(''); } function drawtexthorizontal(text, x, y,radius) { ctx.font = "bold 30px serif"; // ctx.textalign = "center"; ctx.filltext(text, x, y,radius); ctx.restore(); } var x_pos = 90; var y_pos = 150; document.getelementbyid('text_horizontal').onkeyup = function() { var nr_w = (this.value.length); var textlength = (nr_w); if (textlength > 5) { radiuschaninging = r + (textlength * 2); } else { radiuschaninging = r + (textlength); } drawtexthorizontal(this.value, x_pos, y_pos,radiuschaninging); } function textcircle(text, x, y, radius, space, top) { ctx.clearrect(0, ( top ? 0 : y), 600, y); space = space || 0; var numradsperletter = (math.pi - space * 2) / text.length; ctx.save(); ctx.translate(x, y); var k = (top) ? 1 : -1; ctx.rotate(-k * ((math.pi - numradsperletter) / 2 - space)); (var = 0; < text.length; i++) { // alert(radius); ctx.save(); ctx.rotate(k * * (numradsperletter)); ctx.textalign = "center"; ctx.textbaseline = (!top) ? "top" : "bottom"; ctx.filltext(text[i], 0, -k * (radius)); ctx.restore(); } ctx.restore(); } </script> </body>
well got below function this source , wrapped around function , works!! overlapping problem not there!
this drawtexthorizontal function
function drawtexthorizontal(text, x, y,radius) { ctx.font = "bold 30px serif"; wraptext(ctx,text,x,y,4000,1); //call ctx.restore(); } this wraptext function got above said source
function wraptext(context, text, x, y, maxwidth, lineheight) { var words = text.split(' '); var line = ''; for(var n = 0; n < words.length; n++) { var testline = line + words[n] + ' '; var metrics = context.measuretext(testline); var testwidth = metrics.width; if (testwidth > maxwidth && n > 0) { context.filltext(line, x, y); line = words[n] + ' '; y += lineheight; } else { line = testline; } } context.filltext(line, x, y); } here updated fiddle
