PDFを再度発行すると数字がぐちゃぐちゃになる今のスクリプト

Question

実現したいこと

今、インボイス対応の領収書、請求書、納品書をwebで作るためのスクリプトを作っています。
細かい実装は後回しにしながらやっています。
今、困っているのが、PDFを発行すると、文字がぐちゃぐちゃになる状態を直したいのです。
canvasをコピーすればいいのかもしれないけど、その方法がわかりません。
私の目には、canvasを２つ、document.createElement("canvas")で作っているけど、実際に動いているcanvasは、１つだけみたいに見えます。
canvas2 = canvasで、コピーしているようで、コピーしきれていないのではないかと感じていますが、確実にわかっているわけではないので、確信は持てません。
直し方というか、原因がわかる方、よろしくおねがいします。
あと、ついでに、このアプリ（？）が使いやすいかどうかも教えてくれると幸いです。

発生している問題・分からないこと

文字がぐちゃぐちゃになる問題。
今、わからないのは、JavaScriptで書いている、canvasの画像のバックアップの取り方と、差し替えの仕方。
その他の細かいものは、ぐぐりながら考えます。

該当のソースコード

ものすごく長いスクリプトなので、文字制限オーバーになるので、自分の都合がつくサーバーにうｐしました。
https://sizukasenkyo.com/apuri/tukurikake1.php

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

Lodashというライブラリを使って、_.cloneDeep(canvas)のようなことをやっても無駄だったこと。
関数内で、canvas２の挙動をいちいち宣言しないとエラーになること。
JavaScriptのエラーの原因が、Python以上にわかりにくくて、死ぬほど開発しづらいということ。

補足

jsPDFというライブラリを使っています。

Comments

[yambejp]

普通に文字化けなくダウンロードされます。
win chrome/firefox

[cockpit]

試してくれてありがとうございます。
そう。１回目のダウンロードは問題なくダウンロードされます。
問題は画像アップロードしたあとで、「１回目に打ち込んだやつ、間違えたものを打ち込んじゃったので、修正して、えい！」と、修正して出した２回目以降のPDFなんです。
もう１度画像をアップロードすれば、問題ないPDFにはなるのですが。

[Lhankor_Mhy]

再度発行というのは、具体的にはどのような手順ですか？　画面内に書かれている『テンプレ』と関係がありますか？

[cockpit]

ありがとうございます。
テンプレートはまだ実装していません。
「背景にする画像」のとこのボタンを押して、画像を読み込ませてから、税別価格と税率を、何か設定する。そうすると、税込み価格が計算されて、税込み価格の合計が、領収価格に反映されます。
それの、税別価格をいろいろ変更して、PDFを再度発行すると、文字が前のものと重なります。
そんな症状です。

[Lhankor_Mhy]

問題を確認しました。
ソースコードのコメントに

//背景が何もなければ白紙、あれば背景をコピー。
//白く塗ると画像が消え、
//塗らないと、pdf作り直しのときに文字が前のと重なる。
//この問題をどうすべきか？

とありましたが、この質問のことですか？

[cockpit]

はい、そのとおりです。このコメントの通りです。
みつけてくれてありがとうございます。

[Lhankor_Mhy]

「PDFをダウンロード」ボタンを押してから画像を表示するように変更するとうまくいきました。
非同期処理があるので、それを待ち合わせる必要があります。

[cockpit]

すごく助かりました。
JavaScriptには、ほとんど慣れていなかったもので、いろんなことを不勉強なまま、見切り発車でぐぐりながらやっていたので、いろんなところでつまづいていました。ありがとうございます。

Answer 1

補足依頼欄にも書きましたが、「PDFをダウンロード」ボタンを押してから画像を表示するようにするとうまくいくかと思います。
非同期処理があるので、それを待ち合わせる必要があります。以下のコードでは、async await を使いましたが、then やコールバックでももちろん大丈夫です。

    function addText() {
        //背景が何もなければ白紙、あれば背景をコピー。
        //白く塗ると画像が消え、
        //塗らないと、pdf作り直しのときに文字が前のと重なる。
        //この問題をどうすべきか？



        // if (file.value !== "") {
        //     canvas2 = canvas;
        // } else {
        // ctx.xxx = 0;
        canvas2 = canvas;
        // ctx2.fillStyle = '#ffffff';
        // ctx2.fillRect(0, 0, canvasWidth, canvasHeight);
        // }

//...

    async function hakkou() {
        await canvasDraw();
        addText();

//...

    async function canvasDraw(imgSrc) {
        return new Promise((resolve, reject) => {

            // canvas内の要素をクリアする
            ctx.fillStyle = `rgba(255,255,255,1)`;
            ctx.fillRect(0, 0, canvasWidth, canvasHeight);

            //  ctx.clearRect(0, 0, canvasWidth, canvasHeight);

            // Canvas上に画像を表示
            var img = new Image();
            img.src = uploadImgSrc;
            img.onload = function () {
//...
                resolve();
            }
        })
    }

なお、背景画像がないときの処理は手抜きましたのでよろしくお願いいたします。

Comments

[cockpit]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。

超ものすごくありがとうございます。
おかげで領収書などの発行をすることができます。
あと、このスクリプトは公共のものとして、不特定多数に使わせる予定のものでもあったので、いろんな人が助かることと思います。
本当に助かりました。