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;
}