Link to home
Start Free TrialLog in
Avatar of Ramees Sesame
Ramees Sesame

asked on

How to draw an ovel shaped text in html canvas?

I am building a html5-canvas application which can draw line, circular text and now i need to write the text in oval shaped text.
https://stackoverflow.com/questions/44927005/how-to-draw-an-ovel-shaped-text-in-html-canvas
Avatar of Leonidas Dosas
Leonidas Dosas
Flag of Greece image

I buily a function inside object prototype that you can bind it at canvas elements with an existing id attr.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->

<canvas id="thecanvas" width="400" height="400"></canvas>

<!-- End your code here -->
</body>
</html>

Open in new window


The JS script below.Note the parameters that function taking.The center pos ccordinates (cx,cy) the radius lenght at x and y axes (rx,ry) and the text that you want inside (text):
Object.prototype.setEclipse=function (cx,cy,rx,ry,text){
      if((typeof this)==='object' && this.tagName==='CANVAS'){
      var _this=this;      
      this.ctx=(function(){        
        var canvas = document.getElementById(_this.id);
        var ctxElm = canvas.getContext('2d'); 
        return ctxElm;
      })();
           
      this.ctx.fillText(text,cx-cx/7,cy);      
      (function(arg){
        arg.ctx.save(); // save state
        arg.ctx.beginPath();

        arg.ctx.translate(cx-rx, cy-ry);
        arg.ctx.scale(rx, ry);
        arg.ctx.arc(1, 1, 1, 0, 2 * Math.PI, false);

        arg.ctx.restore(); // restore to original state
        arg.ctx.stroke();
      })(this);
      }  
};

var  myCanvas=document.getElementById('thecanvas');

myCanvas.setEclipse(150, 150, 150, 100, 'This a text');

Open in new window

Avatar of Ramees Sesame
Ramees Sesame

ASKER

Hello @Leonidas Dosas :

Thank you for your quick reply. Ovel is good in algorithm. But i need the text which should be in the oval shaped.
Please find the attached image
User generated image
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.