canvasの画像の上に描画する方法について

Question

const SW = window.innerWidth;
const SH = window.screen.height;

let can = document.getElementById("can");
let ctx = can.getContext("2d");

const img01 = new Image();
img01.src = "./b6b85a3281f5512d95f18c07ec0f6e52_l.jpg";

img01.onload = function() {
    ctx.drawImage(img01,0,0,SW,SH);
}

ctx.fillStyle;
ctx.fillRect(0, 0, 100, 100);

タイトルの通りになりますが、canvasで指定した画像の上に描画したいです。

今のままではfillRectで描画した黒の四角形が写真の下に描画されます。

写真の上に黒の四角形を描画したいです。

やり方をご存知であればご教授頂きたいです。

宜しくお願いします。

Comments

[m.ts10806]

現在のコードにおける問題点は何でしょうか
https://teratail.com/help/question-tips#questionTips3-4

[退会済みユーザー]

何が問題・課題・分からないのか詳しく書いてください。

[yambejp]

> canvasで指定した画像の上に描画したい

何を描画するのでしょうか？
手書きでいいのでサンプルを画像で例示できませんか？

[ntttt]

修正の依頼ありがとうございました。

修正させていただきました。また何か分からないことがありましたら、その都度修正させていただきます。

[退会済みユーザー]

> 写真の上に黒の四角形を描画したいです。

アップされていた画像を見るとそれはできているようですけど・・・　それがやりたいことと違うとすると一体何がしたいのですか？

[ntttt]

すみません、こちらの写真はこのようにしたいという意味です

[oikashinoa]

今どうなっているかも写真を上げると回答つきやすいですよ。

Answer 1

写真の上に黒の四角形を描画したいです。

質問者さんのコードの「黒の四角形」を描くための、

ctx.fillStyle;
ctx.fillRect(0, 0, 100, 100);

の 2 行を image.onload にアタッチしたリスナの中に記述すれば期待通りになると思います。

つまり、以下のようにするということです。

img01.onload = function() {
    ctx.drawImage(img01,0,0,SW,SH);
    ctx.fillStyle;
    ctx.fillRect(0, 0, 100, 100);
}

何故アップされたコードでは期待通りにならないかと言うと、質問者さんのコードではリスナを load イベントにアタッチした後、即 ctx.fillRect(...) で「黒の四角形」が描かれ、その後 load イベントが発生してリスナの ctx.drawImage(img01,0,0,SW,SH); で canvas に img01 が上書きされるからだと思います。

Comments

[ntttt]

ご丁寧に教えて頂きありがとうございました。

やりたいことができましたので、本当に助かりました！
ありがとうございます。