The canvas that has been downloaded is showing a font that is not the

I'm facing an issue with my code. After downloading an image that includes a canvas and a div on top of it, I noticed that the font style of the div is different from what I had specified.

Below is the code for the Div:

<div id="memePlaceHolder" style="height: 700px; width:700px;background:#BBB;">
    <canvas id="c" width="0" height="0">
    </canvas>
    <div id="myTestDiv" name="myTestDiv" >
        <h1>My Test Header</h1>
        <br/>
        <h2>Test Text</h2>
    </div>
</div>
<button onclick="save()">Save as Image</button>

Next, here's the code for the save function:

function save() {
    html2canvas(wrapperMeme, {
        onrendered: function (canvasMeme) {
            let a = document.createElement('a');
            a.href = canvasMeme.toDataURL();
            a.download = 'myImage.png';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }
    });
}

Lastly, here is the CSS styling of the div:

#myTestDiv{
    font-family: 'DIN Condensed Bold';
    color: #F9F3F4;
    text-shadow: 0px 0px 300px #000;
    padding: 1px 1px;
    border: solid #F9F3F4 7px;
    float:center;
    width: 40%;
    z-index: 2;
    position: absolute;
}

Answer №1

It appears from the initial query that you are utilizing a custom font, as there is no default font by the name of DIN Condensed Bold.

If this is the case, then you will need to properly import the font into your CSS using the @font-face rule.

@font-face {
  font-family: DIN Condensed Bold;
  src: url(https://cdn.rawgit.com/justrajdeep/fonts/4b9af53d/DIN%20Condensed%20Bold.ttf);
}

ᴅᴇᴍᴏ

let wrapperMeme = document.querySelector('#memePlaceHolder');

function save() {
    html2canvas(wrapperMeme, {
        onrendered: function (canvasMeme) {
            let a = document.createElement('a');
            a.href = canvasMeme.toDataURL();
            a.download = 'myImage.png';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }
    });
}
@font-face {
    font-family: DIN Condensed Bold;
    src: url(https://cdn.rawgit.com/justrajdeep/fonts/4b9af53d/DIN%20Condensed%20Bold.ttf);
}

#myTestDiv {
    font-family: DIN Condensed Bold;
    color: #F9F3F4;
    text-shadow: 0px 0px 300px #000;
    padding: 1px 1px;
    border: solid #F9F3F4 7px;
    float: center;
    width: 40%;
    z-index: 2;
    position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="memePlaceHolder" style="height: 700px; width:700px;background:#BBB;">
    <canvas id="c" width="150" height="150">
    </canvas>
    <div id="myTestDiv" name="myTestDiv">
        <h1>My Test Header</h1>
        <br/>
        <h2>Test Text</h2>
    </div>
</div>
<button onclick="save()">Save as Image</button>

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

Swap out the image backdrop by utilizing the forward and backward buttons

I am currently working on developing a Character Selection feature for Airconsole. I had the idea of implementing this using a Jquery method similar to a Gallery. In order to achieve this, I require a previous button, a next button, and the character disp ...

jQuery is working perfectly on every single page, with the exception of just one

Check out my code snippet here: http://jsfiddle.net/9cnGC/11/ <div id="callus"> <div class="def">111-1111</div> <div class="num1">222-2222</div> <div class="num2">333-3333</div> <div class="num3">444-4444< ...

How can I relocate an object to a different position within THREE.JS?

I'm trying to figure out how to move one object to the position of another object. I found some suggestions online to use the TWEEN library, but I'm having trouble integrating it into my code. Any help would be greatly appreciated :) <scrip ...

Having trouble incorporating autocomplete search results into an HTML table using Jquery, Ajax, and JSP

My current project involves an App that utilizes AJAX with jQuery to communicate with a Spring-boot REST controller. While the app is functional, I am facing difficulty in displaying the search results neatly within HTML tables. https://i.sstatic.net/7sw8 ...

The baffling quirks of variables within a Jquery loop

Unfortunately, I'm struggling to come up with a more fitting title for my question, but I'll do my best to provide a clear explanation of my issue. Here is the code snippet I am working with: let pdfInvoice_sub_template = [ {text: '{ ...

JQuery AJAX click event not triggering

I'm currently working on a project to create a dynamic website where users can update text fields directly from the site. However, I've encountered an issue on the 'admin' page where nothing happens when the button is pressed to set the ...

When attempting to access the Angular app in Edge, it automatically redirects to open in IE 11 instead

I have encountered an issue with my angular 5 App. It works perfectly fine in Chrome and Firefox, but when I try to open it in Microsoft Edge on Windows 10, the application always opens in the IE 11 browser. There are no errors displayed on the console. W ...

JavaScript: Converting an array of strings into an array of objects with proper formatting

After scanning barcodes, I have an array of strings that currently contains the following data: var array = ['NEW', '1111', 'serial1', 'serial2, 'NEW', '2222', 'serial3', 'serial4'] ...

Error in routing of submit button in Express.js

While attempting to create a basic "to-do list" using HTML requests, I encountered an issue with the PATCH request. Instead of redirecting to "/", it redirected to "/posts/2" and displayed the message "Cannot POST /posts/2", without updating the array elem ...

Filtering a list with Vue.js using an array of checkboxes

Currently, I am exploring ways to filter a v-for list using a checkbox model array with multiple checkboxes selected. Most examples I have come across only demonstrate filtering one checkbox at a time. In the demo here, you can see checkboxes 1-3 and a lis ...

What is the process for including a static file on an http server?

Looking to create a chatroom using node.js. Utilizing the socket.io template for this project. var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); var fs = require(&ap ...

Activate automatic postback using JavaScript

Access to the <body> tag is restricted as it is in masterpage. To automatically trigger a postback when the page loads, you can use the following script: <script type="text/javascript"> window.onscroll= __doPostBack("<%= button.Clie ...

Why might the MIME type 'application/json' be refused when the dataType is JSON?

Is it true that if the dataType is set to JSON in jQuery, it expects a JSON response? I found http://api.jquery.com/jquery.ajax/ to be informative on this topic. In the following function, I have experimented with specifying both no dataType (for jQuery&a ...

Time for the browser to evaluate javascript code has arrived

We are looking to enhance the speed at which our Javascript files load in the browser. Although our own Javascript files are simple and small, larger libraries like jQuery and KendoUI take a considerable amount of time to evaluate. We are interested in fin ...

Use CSS3 and jQuery.validate to highlight mandatory fields in red

I've been attempting to change the color of required fields in a form to red, but so far I haven't had any success. Here is the form code and the CSS that I have experimented with. contact.html <h2>Send us an ...

Is it better to throw an exception before doing any filtering?

Checking for the existence of removeId in the items before filtering to avoid exceptions. Is there a more efficient way to handle this without using two loops? This code may not be optimized due to the double looping process. const items = ...

What is the best way to align a button with the edge of an image?

How can I use CSS to position a button on the edge of an image? https://i.stack.imgur.com/FEFDC.png Here is my code: <div> <button class="" aria-label="Eat cake">Btn</button> <img class="pull-left" src="style.png" style="widt ...

Encountered an error during the production build of NEXTJS, where it panicked due to the global thread pool not being initialized

While hosting my app on Heroku and running git push heroku main, I encountered the following error: panicked at 'the global thread pool has not been initialized.: threadpool builderror { kind: ioerror(error { kind: unsupported, message: "operatio ...

Property usedJSHeapSize in Chrome

After doing some research online, I found that the documentation on this topic is quite lacking. I am currently dealing with a significant memory leak in my code and have been using: window.performance.memory.usedJSHeapSize However, it seems like the val ...

What is the best way to retrieve all objects from this data model?

I am looking to collect all the Model Objects from the data structure provided below. const PRODUCTS = [ { brand: 'Audi', allSeries: { serie: 'A3', allModels: [ { model: ' ...