ChatGPT 4o with canvas ベータ版を使って、fabric.js による多角形の描画を作成してみます。

概要

ちょっとさわった感じだと ChatGPT 4o with canvas ベータ版は、ChatGPT 4o よりもコード作成がしやすく、コードの変更内容もわかりやすい。
fabric.js による多角形の描画するコードを作成してみました。

作成した「Fabric.js Polygon Drawer」

初期バージョン
いくつか変更したバージョン

ChatGPT 4o with canvas の画面

指定に応じて、コードが右側に表示されます。
かなりラフな指示でもコードを作成してくれました。

コードの変更内容

コードの変更箇所を表示できます。

作成したコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fabric.js Polygon Drawer</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h2>多角形を描く (3〜100角形)</h2>
    <label for="sides">角の数:</label>
    <input type="number" id="sides" min="3" max="100" value="6">
    <label for="bgColor">図形の背景色:</label>
    <input type="color" id="bgColor" value="#ffa500">
    <button onclick="drawPolygon()">描画</button>
    <canvas id="canvas" width="600" height="400"></canvas>

    <script>
        const canvas = new fabric.Canvas('canvas');

        function drawPolygon() {
            const sides = parseInt(document.getElementById('sides').value);
            if (sides < 3 || sides > 100) {
                alert('角の数は3から100までです');
                return;
            }

            const bgColor = document.getElementById('bgColor').value;

            const radius = 100;
            const centerX = canvas.getWidth() / 2;
            const centerY = canvas.getHeight() / 2;
            const points = [];

            for (let i = 0; i < sides; i++) {
                const angle = (i * 2 * Math.PI) / sides;
                const x = centerX + radius * Math.cos(angle);
                const y = centerY + radius * Math.sin(angle);
                points.push({ x, y });
            }

            const polygon = new fabric.Polygon(points, {
                left: centerX - radius,
                top: centerY - radius,
                fill: bgColor,
                stroke: 'blue',
                strokeWidth: 2,
                selectable: true
            });

            canvas.clear();
            canvas.add(polygon);
        }
    </script>
</body>
</html>

感想

ベータ版ということですが、なかなか使いやすくいい感じです。
ChatGPT 4o だとコードの応答が遅く感じますが、かなり改善されていると思います。