Rotate html5 canvas text from its center point - Javascript Canvas

Javascript examples for Canvas:Text

  1. HOME
  2. Javascript
  3. Canvas
  4. Text

Description

Rotate html5 canvas text from its center point

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <link rel="stylesheet" type="text/css" media="all" href="reset.css"> 
      <!-- reset css --> 
      <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
      <style>

body{ background-color: ivory; }
canvas{border:1px solid red;}

      </style> 
      <script>
$(function(){/*from  ww w  . j a  v a  2  s  . c  o  m*/
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var x=150;
    var y=150;
    var labelRotation=45;
    var label="This is some text.";
    animate();
    function draw(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        //
        ctx.beginPath();
        ctx.arc(x,y,3,0,Math.PI*2);
        ctx.closePath();
        ctx.fill();
        //
        ctx.save();
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.translate(x , y);
        ctx.rotate(labelRotation * Math.PI / 180);
        ctx.fillText(label, 0, 0);
        ctx.restore();
    }
    function animate(){
        requestAnimationFrame(animate);
        labelRotation++;
        draw();
    }
}); // end $(function(){});

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" width="300" height="300"></canvas>  
   </body>
</html>

Related Tutorials