Positioning text in relation to an HTML canvas

Question

Positioning text in relation to an HTML canvas

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="800" height="450" style="border:1px solid #d3d3d3; background-color:#999999;">

Your browser does not support the HTML5 canvas tag.</canvas>

<script>

<!--normal canvas code-->

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

<!--code for the text line-->

ctx.font = "42px Arial";

<!--place the words in mid x position and in upper 1/6 of y position-->

var canvasxposition = (c.width/2)-(ctx.fillText.x/2)

var canvasyposition = c.height/6

ctx.fillText("Hello World",canvasxposition,canvasyposition);

</script>

</body>
</html>

I am utilizing a canvas element that will eventually be used to create an image. My goal is to center the text horizontally along the x-axis and position it at the top of the canvas vertically. Specifically, I want the text to appear one-sixth of the way down from the top.

Upon testing the provided code, I encountered an issue with the following line:

I require assistance in identifying the error within this line as my intention is to align the middle of the text along the y-axis with the middle of the canvas along the y-axis.

var canvasxposition = (c.width/2)-(ctx.fillText.x/2)

javascript html css html5-canvas alignment

Answer 1

Answer №1

To perfectly center text horizontally, utilize context.textAlign

To align text vertically from its centerpoint, use context.textBaseline:

// Center text both horizontally and vertically
ctx.textAlign="center";
ctx.textBaseline="middle";

For a live demonstration and example code, visit: http://jsfiddle.net/m1erickson/nT37D/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    // Acquire references to the canvas and context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // Add crosshairs
    ctx.beginPath();
    ctx.moveTo(0,canvas.height/6);
    ctx.lineTo(canvas.width,canvas.height/6);
    ctx.moveTo(canvas.width/2,0);
    ctx.lineTo(canvas.width/2,canvas.height);
    ctx.stroke();

    // Align text both horizontally and vertically from its centerpoint
    ctx.textAlign="center";
    ctx.textBaseline="middle";

    // Display sample text
    ctx.font="18px arial";
    ctx.fillText("Hello World",canvas.width/2,canvas.height/6);

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Centering text both horizontally and vertically within the text's centerpoint</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 2

To perfectly center text horizontally, utilize context.textAlign

To align text vertically from its centerpoint, use context.textBaseline:

// Center text both horizontally and vertically
ctx.textAlign="center";
ctx.textBaseline="middle";

For a live demonstration and example code, visit: http://jsfiddle.net/m1erickson/nT37D/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    // Acquire references to the canvas and context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // Add crosshairs
    ctx.beginPath();
    ctx.moveTo(0,canvas.height/6);
    ctx.lineTo(canvas.width,canvas.height/6);
    ctx.moveTo(canvas.width/2,0);
    ctx.lineTo(canvas.width/2,canvas.height);
    ctx.stroke();

    // Align text both horizontally and vertically from its centerpoint
    ctx.textAlign="center";
    ctx.textBaseline="middle";

    // Display sample text
    ctx.font="18px arial";
    ctx.fillText("Hello World",canvas.width/2,canvas.height/6);

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Centering text both horizontally and vertically within the text's centerpoint</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Positioning text in relation to an HTML canvas

Answer №1

Similar questions

Avoiding duplicate form submissions in Struts2: Managing Success Messages Display

Using TypeScript, implement a function that is called when a React checkbox's state changes to true

Adjust the x-scroll to continue infinitely while deactivating the y-scroll

Creating tailored output data from a single table

Difficulty integrating Bootstrap with JavaScript file in Visual Studio Code

Instructions on how to insert a single parenthesis into a string using Angular or another JavaScript function

fetch() operates successfully in Extension but encounters difficulties in Chrome Console/Snippet

What is the best way to display multiple canvases on one page?

The labels in production are getting cut off when creating a view in ASP .NET MVC

Unspecified locale with Next.js router

A tutorial on how to create the appearance of disabled buttons that look the same as enabled buttons through the use

What is the best way to group all matched objects from an array based on multiple keys?

A custom script developed to detect the presence of the numeric combination "11" and promptly notify the

What is the best way to center align and add an icon to the header in Ionic?

In Node.js, when using the `new Date(year, month, date)` constructor, the date is automatically converted to UTC

Reveal the hidden div by sliding it up from the bottom

Tips for aligning the timing of two CSS animations

Learn how to dynamically show the chosen option from a dropdown menu in input text fields using AngularJS

When the height is set to 100vh, the Div and Image appear misaligned vertically

Python Scrapy: Extracting live data from dynamic websites