Increase resolution of Image while converting HTML DIV using JavaScript html2canvas

I recently learned how to capture and convert section of web page into image and save into database. But I noticed that the converted image appears blurred. I read something about dpi (dots per inch) in relation to images, but I couldn’t really understand it. Do I have to apply it if I want to get a better image quality, and how can I do that? Is there a way to improve the quality of the image; make it look sharp and clear, just like its original image?

<div class="front" runat="server" id="front">
    <div class="IDtop">
        <div class="row" runat="server" id="header" style="width: 100%; margin-top: 5px;">
            <div class="col-2">
                <asp:Image ID="Image2" CssClass="idcardimg" AlternateText="logo" runat="server" Height="20" />
            </div>
            <div class="header col-9">
                <div style="text-align: center;">
                    <h5>
                        <asp:Label ID="lblName" runat="server" Text=""></asp:Label></h5>
                </div>
            </div>
        </div>
        <div class="type" id="type" style="text-align: center;">
            <asp:Label ID="typelbl" runat="server" Text="----------"></asp:Label>
            <span style="color: #999;">IDENTITY CARD</span>
        </div>
        <div>
            <asp:FileUpload ID="imgupload" runat="server" Style="display: none" />
            <asp:Image AlternateText="Upload Photo" ID="dp" runat="server" CssClass="dp" />
        </div>
    </div>
    <div class="bottom">
        <h2>
            <asp:Label runat="server" ID="idname" Text="Holder's Name"></asp:Label></h2>
        <h5>
            <asp:Label runat="server" ID="Designatelbl" Text="Title"></asp:Label></h5>
        <h5>
            <asp:Label runat="server" ID="cardID" Text="ID Number"></asp:Label></h5>
        <br />
        <div class="sign">
            <asp:FileUpload ID="signupload" runat="server" Style="display: none" />
            <asp:Image AlternateText="Upload Signature" ID="holder" runat="server" CssClass="holder" Height="30" />
            <p style="font-size: 8pt;">Holder's signature</p>
        </div>
    </div>
</div>
 
<asp:HiddenField ID="ImageDatahf" runat="server" />
 
<div class="btnfront" runat="server" style="margin: 0 auto; width: 100%; margin-top: 5%;">
    <asp:Button ID="CardBtn" runat="server" CssClass="btn navbar-btn" Text="Save Card" UseSubmitBehavior="false" OnClick="ConvertBtn_Click" OnClientClick="return ConvertToImage(this)" />
</div>

protected void ConvertBtn_Click(object sender, EventArgs e)
{
    try
     {
       string fileName = Test-IDCARD + ".png";
           string base64 = Request.Form[ImageDatahf.UniqueID].Split(',')[1];
           byte[] bytes = Convert.FromBase64String(base64);
           Response.Clear();
           Response.ContentType = "image/png";
           Response.AddHeader("Content-Disposition", "attachment; filename=" + fileName);
           Response.Buffer = true;
           Response.Cache.SetCacheability(HttpCacheability.NoCache);
           Response.BinaryWrite(bytes);
           Response.End();
     }
    catch (SqlException ex)
    {
         string msg = "Error:";
         msg += ex.Message;
         throw new Exception(msg);
    }
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
     function ConvertToImage(CardBtn) {
         html2canvas($("#front")[0]).then(function (canvas) {
             var base64 = canvas.toDataURL();
             $("[id*=ImageDatahf]").val(base64);
             __doPostBack(CardBtn.name, "");
         });
     }
</script>