JavaScript：キャンバスでシリア国旗を描画する

Canvas APIの機能でシリア国旗を描画してみます。
☆型を描画する機能は、Canvas APIにはないのでdrawStarという関数を自作しています。

ソースコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
    <title>キャンバスで国旗を描く - シリア国旗</title>
</head>
<body>
    <canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

style.css

/* style.css */
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

canvas{
    background-color: #ddd;
}

main.js

// main.js
let canvas, g;

/**
 * 星を描画する
 * @param {int} cx 星の中心x座標
 * @param {int} cy 星の中心y座標
 * @param {int} r 星の半径
 * @param {string} color 描画色
 */
function drawStar(cx, cy, r, color){
    let theta = -90;    // 角度修正（キャンバスでは3時方向が0度扱いのため12時方向を0度とする）
    let star = [];

    while(theta<360-90){   // 星の5つの頂点を求める
        const pos = {
            x: r * Math.cos(theta*Math.PI/180) + cx,
            y: r * Math.sin(theta*Math.PI/180) + cy,
        };
        star.push(pos);
        theta += 72;    // 次の点の位置：360度 ÷ 5 = 72度
    }

    // 星を描画する
    g.fillStyle = color;
    g.beginPath();
    g.moveTo(star[0].x, star[0].y);
    g.lineTo(star[2].x, star[2].y);
    g.lineTo(star[4].x, star[4].y);
    g.lineTo(star[1].x, star[1].y);
    g.lineTo(star[3].x, star[3].y);
    g.closePath();  // パスを閉じる
    g.fill();
}

/**
 * シリア国旗を描画する
 * @param {int} x x座標
 * @param {int} y y座標
 * @param {bool} shadow 国旗の影のON/OFF
 */
function drawFlagOfSyria(x, y, shadow){
    const COLOR_TOP = "#CF0921";
    const COLOR_MIDDLE = "#FFFFFF";
    const COLOR_BOTTOM = "#000000";
    const COLOR_STAR = "#007B3A";

    // 国旗の影を描画する
    if(shadow){
        // 影がついたようにみせる
        g.shadowOffsetX = 10;
        g.shadowOffsetY = 10;
        g.shadowBlur = 10;
        g.shadowColor = "rgba(0, 0, 0, 0.4)";

        // 国旗の影を描画
        g.fillStyle = "#000";
        g.fillRect(x, y, 300, 195);
        g.shadowColor = "rgba(0, 0, 0, 0)";
    }

    // シリア国旗の3色を描画
    g.fillStyle = COLOR_TOP;    // 上   赤部分
    g.fillRect(x, y, 300, 65);
    g.fillStyle = COLOR_MIDDLE;       // 中央 白部分
    g.fillRect(x, y+65, 300, 65);
    g.fillStyle = COLOR_BOTTOM;    // 下   黒部分
    g.fillRect(x, y+130, 300, 65);

    // 中央の2つの星部分
    drawStar(x+100, y+101, 28, COLOR_STAR);  // 左側
    drawStar(x+200, y+101, 28, COLOR_STAR);  // 右側
}

/*
 * 起動時の処理
 */
window.addEventListener("load", ()=>{
    // キャンバスの初期設定
    canvas = document.getElementById("canvas");
    g = canvas.getContext("2d");

    // 画面をクリア
    g.clearRect(0, 0, canvas.width, canvas.height);

    // 国名描画
    g.fillStyle = "#555";
    g.font = "bold 22px System";
    g.textBaseline = "top";            // 文字のベースラインを上に
    g.fillText("Syrian Arab Republic", 12, 12);

    // シリア国旗を描画
    drawFlagOfSyria(50, 50, true);
}, false);

drawFlagOfSyria関数の引数は以下の通りです。第3引数は、Boolean型で指定します。

drawFlagOfSyria( x座標, y座標, 影の有無 )

記述例

drawFlagOfSyria(50, 50, true);      // 影あり
drawFlagOfSyria(450, 50, false);    // 影なし

イメージ

ちなみにウクライナでの戦争難民が問題となっていますが、シリアではもっと古くから多くの難民が出ています。
そしてそれは2023年の現在も続いています。