Automatic Oekaki A picture is automatically drawn by JavaScript canvas. The picture drawn is random, but it must be a human face. The picture must be a human face. Clicking the Regenerate! button, the picture will be regenerated.'s game

Click here for free DL of the app version that can save data.

No:7996

2233

←

Prev Next

→

Automatic Oekaki A picture is automatically drawn ..ALL
Developer もちきなこ｜Date and time 23/7/11 18:42:36
Build time 12.854 sec｜Game capacity 2.238KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>自動おえかき</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
        #generateButton {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <button id="generateButton">再生成！</button>
    <canvas id="canvas" width="300" height="300"></canvas>

function generateRandomFace() {
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const radius = canvas.width / 3;

ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the face shape
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
            ctx.fillStyle = getRandomColor();
            ctx.fill();
            ctx.closePath();

// Draw the eyes
            const eyeRadius = radius / 5;
            const eyeOffsetX = radius / 2;
            const eyeOffsetY = radius / 4;

ctx.beginPath();
            ctx.arc(centerX - eyeOffsetX, centerY - eyeOffsetY, eyeRadius, 0, 2 * Math.PI);
            ctx.arc(centerX + eyeOffsetX, centerY - eyeOffsetY, eyeRadius, 0, 2 * Math.PI);
            ctx.fillStyle = getRandomColor();
            ctx.fill();
            ctx.closePath();

// Draw the mouth
            const mouthWidth = radius / 2;
            const mouthHeight = radius / 5;
            const mouthOffsetY = radius / 4;

ctx.beginPath();
            ctx.rect(centerX - mouthWidth / 2, centerY + mouthOffsetY, mouthWidth, mouthHeight);
            ctx.fillStyle = getRandomColor();
            ctx.fill();
            ctx.closePath();
        }

function getRandomColor() {
            const letters = "0123456789ABCDEF";
            let color = "#";
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

document.getElementById("generateButton").addEventListener("click", generateRandomFace);

generateRandomFace();
    </script>
</body>
</html>