canvas text center code example

Example 1: javascript canvas text centered

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.textAlign = "start"; // left/right depending on language
ctx.textAlign = "end"; // left/right depending on language
ctx.textAlign = "left";
ctx.textAlign = "center";
ctx.textAlign = "right";
ctx.fillText("my text!", 150, 140);

Example 2: canvas text align

ctx.textAlign = "left";

Example 3: how to place text at custom position on canvas in javascript

<!doctype html>
<html>
<head>
<body>
<canvas></canvas>
<script>
var canvas=document.querySelector('canvas');
var context=canvas.getContext(2d);
context.textAlign = 'center';
         context.fillStyle = 'blue';
      context.fillText('Helllo Word!', 10, 50);
    </script>
    </body>
    </head>
    </html>

Tags:

Misc Example

Related