I'm using html2canvas to print my page, which contains <input type="time"> elements. I would like them to print in the displayed 12-hour format including the AM/PM text. From what I've read about time inputs, the browser handles the displayed time format automatically and you can't actually set it anywhere in the element itself. Is there any way I can tell html2canvas to take the displayed time format and not the 24-hour format?

My page:

html2canvas result:

html2canvas JS:

html2canvas(document.querySelector("#main"), {scale: 3}).then(canvas => {
        document.body.appendChild(canvas)
    }).then(() => {
        let canvas = document.querySelector('canvas');
        canvas.style.display = 'none';
        let image = canvas.toDataURL("image/png");
        let tWindow = window.open("");
        $(tWindow.document.body)
            .html("<img id='Image' src=" + image + " style='width:100%; height:auto;'></img>")
            .ready(function () {
                tWindow.focus();
                tWindow.print();
            });