Unable to modify the appearance of text on the canvas

Trying to customize the font style of canvas text with Press Start 2P

The URL has been imported into a CSS file as follows:

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

.canvasClass{
    font-family: 'Press Start 2P';
}

<Box className='canvasClass'>
<Canvas2/>
</Box>

Attempting to draw text in this manner:

context.fillStyle = 'rgba(194,213,219,0.8)'
context.font = "42px Press Start 2P";
context.textAlign = 'center'

Confirmed font application on parent div but facing difficulty applying it to the canvas inside. Any reason for not being able to apply the desired font to the canvas despite working on other text components in the same div?

UPDATE:

Considering switching font to Roboto (assuming another Google font)

javascripthtmlcsscanvashtml5-canvas

Answer №1

Always remember to enclose the font family name in quotation marks, just like you did in your CSS declaration.

context.fillStyle = 'rgba(194,213,219,0.8)'
context.font = "42px 'Press Start 2P'";
context.textAlign = 'center'

Additionally, make sure to wait for document.fonts.ready to ensure that the external font has been fully loaded before using it on your canvas.

(async () => {
  await document.fonts.ready;
  const canvas = document.querySelector("canvas");
  const context = canvas.getContext("2d");
  context.fillStyle = 'rgba(194,213,219,0.8)'
  context.font = "42px 'Press Start 2P'";
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.fillText('Hello world', canvas.width/2, canvas.height/2);
})().catch(console.error);
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

.canvasClass{
    font-family: 'Press Start 2P';
}
<div class=canvasClass>
  <canvas width=500 height=150></canvas>
</div>

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

Problems with Bootstrap affix scrolling in Internet Explorer and Firefox

I'm encountering an issue with the sidebar on my website. I've implemented Bootstrap affix to keep it fixed until the end of the page, where it should move up along with the rest of the content at a specific point... Everything seems to be worki ...

javascriptjquerycsstwitter-bootstrapaffix

Utilizing loops for data selection and presentation within a div using MySQL and PHP

I currently have a large table in my MySql database containing numerous rows of records (referred to as the existingbankproducts table): https://i.sstatic.net/jQzd3.png Below is the code I am using to select data from the database: $stmt2 = $DB_con-> ...

phphtmlmysqlsqldatabase

Troubleshooting: Why are my images not displaying in webpack and node.js setup?

My problem: I'm facing an issue with background images in my project. I have included two images and used file-loader to bundle them through webpack. While the images display correctly in the app during development using webpack-dev-server, they disap ...

javascriptnode.jsherokuwebpack

Use JavaScript to upload a JSON file containing arrays into separate tabs

Looking for help with incorporating JSON data into an HTML template that features tabs and a gallery? Take a look at my setup below: <div class="tab"> <button class="tabLinks" onclick="openDiv(event, 'overview'); appendData()" id= ...

javascriptarraysjson

Using JQUERY to select all child checkboxes within a tree structure and check them all

I am looking to create functionality where checking the parent checkbox will automatically check all child checkboxes. While I have gotten this to work for the bottom parent checkbox, it does not seem to function correctly for any parent checkboxes highe ...

jqueryhtmltreeview

Error encountered while parsing Google Map link in Razor.Parse

Situation Within my application, I am utilizing Razor.Parse<>() to parse text, links, and tags to HTML. string Razor.Parse<TEmail>(string razorTemplate, TEmail model) where TEmail : BaseEmail I utilize the symbol '@' to extract dat ...

c#htmlparsingrazor

What methods can be employed to execute a intricate substitution utilizing both javascript and jQuery?

Within the source code of my web pages, I have elements that resemble the following: <div id="opt_3" >A)</div> <div id="opt_2" >B)</div> <div id="opt_4" >C)</div> <div id="opt_5" >D)</div> <div id="op ...

javascriptjquery

Having trouble understanding how to display an HTML file using Next.JS?

Currently, I am working on a project that involves utilizing Next.JS to develop a webpage. The main goal is to display a PDF file on the left side of the screen while integrating Chaindesk on the right side to create a chat bot capable of extracting inform ...

javascripthtmlreactjsnext.jschatbot

Ensure that the height of the content in JQuery Mobile is set to 100

I'm currently working on an app using JQuery Mobile. Check out this link for my HTML code. There's a full-screen <iframe> within my page. Even though I've specified width:100%; height:100%; border:0% for the iframe, it ends up being ...

htmlcssjquery-mobile

Creating a visually appealing Django filter form with custom styling in HTML

Currently, this is how my django filter form appears: Below is the html code I am using: <form action="" method="get" class="form-inline"> {{myfilter.form|bootstrap}} <button class="btn btn-primary&q ...

pythonhtmlcssdjangoforms

Encountering Timeout Issues with Reading Streams on Amazon S3 using Express.js

I am currently facing an issue with streaming videos from an Amazon S3 Bucket. It seems that everything works perfectly when calling my REST endpoint once, but the problem arises when trying to stream the video simultaneously from multiple browsers. The er ...

javascriptexpressamazon-s3video-streamingaws-sdk-js

The complexity of JQuery's design has left many puzzled

I am new to using Jquery and I have come to the following realizations: Every selector in Jquery always returns a wrapped list of items, which can be: An empty list A list with a single element A list with multiple elements Chained functions operate o ...

javascriptjqueryjquery-selectors

Issues with React's useState hook not updating properly

As a React beginner, I am facing an issue with my input field filtering functionality. The problem arises when the results are filtered and rendered, as it seems to be ignoring the last character of the input value. For instance: If I type in "s", nothing ...

javascriptreactjsaxios

Model updating with the addition of an item and triggering a secondary ng-repeat for refreshing

As I was working on the phone tutorial, I found myself pondering how to implement a specific use case. The browser renders a list of phones. When the user clicks on add phone for one of these phones, the function addItem is triggered and adds that phone ...

javascriptangularjsangularjs-ng-repeat

The hover effect does not function on an SVG element when it is placed within an external file

I've been experimenting with SVG animation. My goal is to change the color of a circle when it's hovered over. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 437 ...

csssvgsvg-animate

Retrieving data from a directive in an HTML table

Utilizing AngularJS, I am seeking a method to retrieve the value from an input located within a specific row in a table. Presented below is an input element. Upon clicking the "add" button, my objective is to extract the value corresponding to that partic ...

javascriptangularjs

Error encountered when using prisma findUnique with where clause

Trying to set up a Singup API using ExpressJS and Prisma is proving to be a bit challenging. The issue arises when I attempt to verify if a given email already exists in my database. Upon passing the email and password, an error is thrown stating Unknown ...

javascriptnode.jsexpressprisma

Displaying a video in fullscreen on a webpage

Struggling to achieve the desired result, seeking advice from experts. Looking to create a classic example like this: http://codepen.io/anon/pen/rWwaRE But want it embedded within blocks of text and possibly triggered by scrolling over it similar to this ...

htmlcssvideofullscreen

Retrieving URL parameters within an API route handler in Next.js

Within my client component called GetUserInfoButton, I initiate a GET request using the URL format of http://localhost:3000/test/users/[id]. The [id] in this URL is represented by an alphanumeric sequence similar to MongoDb. My intention within the file a ...

javascriptnext.js

Guide on generating a request through iteration using Javascript

I'm currently working on a request that involves multiple methods, and I want to streamline the code by using an enum to iterate through and construct the request. However, my attempt at doing this has resulted in unexpected outcomes. The original co ...

javascripttypescriptforeachenumsrequest