【HTML5・javascript】canvas使ってアイキャッチ画像作ってみた

HTMLの記述

<canvas id="cv"></canvas>

javascriptの記述

<script>
//　canvasで使用する画像を読み込む
var img = new Image();
img.src = "https://twotone.me/wp-content/uploads/2019/10/logo_js.png";

// 全て読み込まれた後で読み込む
window.onload = function() {
	canvas = document.getElementById('cv');
	canvas.width = 800 ;//　幅指定
	canvas.height = 425 ;//　高さ指定
	// canvasタグに描画するのに必要
	ctx = canvas.getContext('2d');
	// canvasとgetContext()メソッドが使えるかどうか判定（エラー回避用）
	if (!canvas || !ctx) {
	return;
	}

	// 背景塗る
	ctx.fillStyle = '#fdd735';
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	//　画像の中央寄せ
	var img_x = (canvas.width - img.width) / 2;
	var img_y = (canvas.height - img.height) / 2 - (img.height / 2);
	//画像を描画する
	ctx.drawImage(img, img_x, img_y);

	//　テキスト代入
	var text = "テキストが入ります" ;
	//　テキストのstyle調整
	ctx.lineWidth = 2;
	ctx.fillStyle = "#000";
	ctx.font = "bold 32px Roboto, Noto Sans JP, sans-serif";
	//　テキストのx軸の真ん中寄せ
	var t_size = ctx.measureText( text ) ;//　テキストの幅を知る為だけの記述
	var text_x = (canvas.width - t_size.width) / 2;
	var text_y = (canvas.height - 70);//下から70pxの位置指定
	//　テキストの出力
	ctx.fillText(text, text_x, text_y);

	//　乗算（テキストの後ろにラインマーカー入れるため）
	ctx.globalCompositeOperation = "multiply";

	//　テキストの背景にラインマーカー
	ctx.fillStyle = '#fdd734';
	var border_w = (t_size.width + 20);
	var border_x = (canvas.width - border_w) / 2;
	var border_y = (canvas.height - 75);
	ctx.fillRect(border_x, border_y, border_w, 15);
}
</script>

かなり粗い感じのコードになったけどとりあえず出力できた
以下、実際に出力してみた

実際にcanvasで描画してみた

IE以外では表示が上手くいっているハズ