Adjust the alignment of text on both ends of the HTML5 canvas

Is there an easier way to align text on both sides of a canvas element besides using CSS? The link below might provide some insight: https://github.com/nnnick/Chart.js/issues/114#issuecomment-18564527

I'm considering incorporating the text into the drawing logic rather than manipulating it with CSS. What do you think?

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4"></div>
        <div class="col-xs-4">top text</div>
        <div class="col-xs-4"></div>
    </div>
    <div class="row">
        <div class="col-xs-4">left text</div>
        <div class="col-xs-4"><canvas id="canvas" width="250" height="250"></canvas></div>
        <div class="col-xs-4">right text</div>
    </div>
    <div class="row">
        <div class="col-xs-4"></div>
        <div class="col-xs-4">bottom text</div>
        <div class="col-xs-4"></div>
    </div>
</div>


Fiddle

javascriptcsshtmltwitter-bootstrapcanvas

Answer №1

To achieve the desired layout, transform each div into inline blocks.

.row:nth-child(2) div {display:inline-block; line-height:250px;
   vertical-align:middle; margin:.25em; padding:0; height:auto; width:auto}

#canvas {display:inline-block; vertical-align:middle; margin:0; border:0;
   padding:0;}

Keep in mind that additional CSS styling was necessary for a design closer to the reference image...

.container-fluid {float:left}

.row {text-align:center; width:auto; height:auto}

hr {clear:both}

View the updated fiddle for a visual representation of the changes made.

Also, note that specifying width:auto and height:auto was essential to override certain styles from the bootstrap stylesheet.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason behind a taller button when using a single line span?

Currently experiencing some strange effects with the radio buttons I'm working on. My goal is to have them all be the same size, but they are coming out different depending on whether the text within the button spans one or two lines. I've been a ...

css

What is the maximum storage capacity for variables on a NodeJS/ExpressJS server when handling multiple users?

As I delve into the node server code, I find myself pondering on the idea of storing temporary data - objects and arrays - within variables. These variables are housed in the client variable of a socket and are purged when connection with the client is l ...

javascriptnode.jsexpressmemory-managementperformance-testing

How can the Singleton pattern be properly implemented in Typescript/ES6?

class Foo{ } var instance: Foo; export function getFooInstance(){ /* logic */ } or export class Foo{ private static _instance; private constructor(){}; public getInstance(){/* logic */} } // Use it like this Foo.getInstance() I would ...

javascripttypescriptecmascript-6singleton

Rating of displaying an undefined value (NaN)

I'm having issues with creating a currency conversion calculator, as the result is showing as NaN. Can anyone offer assistance? I've tried multiple solutions but have been unable to resolve it. Check out the following JavaScript code snippet: c ...

javascripthtmlfetch-api

Adding markers to a Leaflet map using coordinates retrieved from a Supabase database - a step-by-step guide

I am looking to incorporate markers on a map using coordinates stored in a Supabase database column. Below is my Vue code: <l-marker v-for="(marker, index) in markers" :key="index" ref="markersRef" :lat-lng="marker.po ...

javascriptvue.jsvuejs2leafletsupabase

AngularJS is unable to properly display (parse) data fetched using $http.get from Laravel5

Working on my SPA project, I have integrated Laravel 5 for database management and used AngularJS for the front-end. All Angular files are stored in the public folder. Instead of displaying a list of users when visiting localhost, it shows: {{ user1.name ...

javascriptphpangularjslaravel

Order the variables in the dropdown menu based on the PHP variables

I currently have a select list that allows me to choose between two options: Popularity and Recently Ordered. My goal is to filter the objects on the page based on these attributes, connecting each option to its respective function in my dataloader.php fi ...

javascriptphp

When attempting to execute "nodemon," the command was not detected

When trying to use 'nodemon' in the command line, an error occurs stating that it is not recognized as a cmdlet, function, script file, or operable program. The system suggests checking the spelling of the name and verifying that the path is corr ...

javascriptnode.jsjsonnodemon

Detecting if the request in Yii Framework 2.0 is coming from an AJAX GET call

While utilizing Yii framework 2.0, I have implemented an AJAX GET jQuery script that references a function within a controller class. $.get('localhost/website/index', {param: 'xxxx'}, function(returnedData){ // some code here..... ...

javascriptphpjqueryajaxyii2

Prevent JavaScript from sending a POST request to a specific URL

Currently facing Cross Site Scripting (XSS) vulnerabilities in a web application, I am curious if there are security measures equivalent to Content-Security-Policy: frame-ancestors and X-Frame-Options for JavaScript. My objective is to restrict the abilit ...

javascriptxss

In TypeScript, use a Record<string, any> to convert to {name: string}

I have developed a custom react hook to handle API calls: const useFetch: (string) => Record<string, any> | null = (path: string) => { const [data, setData] = useState<Record<string, any> | null>(null); var requestOptions: Requ ...

javascriptreactjstypescript

Testing the speed of the client's side

In my quest to create an application that allows users to conduct a speedtest on their WiFi network, I have encountered some challenges. While standalone speedtest apps like Speedtest.net and Google exist, server-based speed test modules from NPM are not s ...

javascriptnode.jsnpmcross-domainspeed-test

Displaying a single row of a PHP array in bold formatting

I have a MySQL query result showing user information and subjects they have chosen. I want to highlight one specific row by making it bold using PHP while keeping the rest as regular text. How can I achieve this? $resultSet = $db->query ("...my q ...

phphtmlarrays

Increase the progress bar at regular intervals of x seconds

I am looking for a jQuery UI progress bar that will increase by x amount every x seconds. Once it reaches 100%, I need it to trigger a function to retrieve some content. Essentially, I need a timer-like feature. EDIT: Note that I do not require any code ...

javascriptjqueryjquery-ui

Instead of pushing multiple items, focus on pushing only one item at a time

I've encountered an issue while attempting to add a new item to my favlist. Using a for loop, I check if the item already exists in the favlist. However, instead of adding the new item only once, it ends up being added multiple times. What would be ...

javascriptarraysangularjsionic-framework

Can Firebase data be updated in real-time in a Vue app?

Utilizing Firebase for Authentication and integrating a database into a Vue app, my current task involves monitoring changes within a 'friends' collection specific to a user. The objective is to seamlessly display the list of friends while refle ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Tips for utilizing the "Sign In with Apple" feature through Apple JS

For implementing "Sign In with Apple" on a web platform using Apple JS, you can refer to the code example available at this link. Now, the query arises: where can I find the Client ID required for this process? I have tried using the app id identifier fro ...

javascripthtmlapple-sign-in

The title of the Electron application remains consistent

My application is being packaged using electron-packager, but it's not changing its name and still displays "Electron." It's supposed to use the productName in my package.json file, but for some reason, it doesn't change. Even after creati ...

javascriptnode.jselectronnode-modules

The Ajax query returned a successful response, yet it unexpectedly triggered an error

Currently, I am delving into the realm of mongodb. I have integrated Express, Body-Parser, and Mongoose into my project, and I'm retrieving data from an online mongodb database hosted on mlab. Everything seems to be functioning smoothly as I've t ...

javascriptajaxmongodbexpressbody-parser

Tips for waiting for an event from a specific element in Playwright

Is there a way to await an event on a specific element using Playwright? Similar to page.waitForEvent, but focusing only on a particular element rather than the entire page. More information can be found in the documentation. ...

javascriptplaywright