Drawing pad where you can select color and canvas size and then draw on the canvas's game

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

No:43556

←

Prev Next

→

Drawing pad where you can select color and canvas ..ALL
Developer User19162｜Date and time 24/2/16 2:49:52
Build time 8.478 sec｜Game capacity 2.832KB｜

Script

Sure! Here's a simple implementation of a drawing game that allows you to select colors and canvas size, and then draw on the canvas using JavaScript:

Color: Size:

To play the game, simply open the HTML file in a browser (on a smartphone or desktop) and use the color picker to select a color, choose a size from the options provided, and start drawing on the canvas by tapping or dragging your finger (or using a mouse on a desktop). The "Clear" button can be used to erase the entire canvas. Hope you enjoy creating your own artwork with this drawing game!

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's a simple implementation of a drawing game that allows you to select colors and canvas size, and then draw on the canvas using JavaScript:

<!DOCTYPE html>
<html>
<head>
    <title>Drawing Pad</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div>
        <label for="color">Color:</label>
        <input type="color" id="color" name="color">

<label for="size">Size:</label>
        <select id="size" name="size">
            <option value="1">Small</option>
            <option value="5">Medium</option>
            <option value="10">Large</option>
        </select>

<button onclick="clearCanvas()">Clear</button>
    </div>

// Initialize default values
        let color = document.getElementById('color').value;
        let size = document.getElementById('size').value;

canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', stopDrawing);
        canvas.addEventListener('mouseout', stopDrawing);

document.getElementById('color').addEventListener('change', function() {
            color = this.value;
        });

document.getElementById('size').addEventListener('change', function() {
            size = this.value;
        });

function startDrawing(e) {
            isDrawing = true;
            draw(e);
        }

function draw(e) {
            if (!isDrawing) return;

const x = e.clientX - canvas.offsetLeft;
            const y = e.clientY - canvas.offsetTop;

context.lineWidth = size;
            context.lineCap = 'round';
            context.strokeStyle = color;

context.lineTo(x, y);
            context.stroke();
            context.beginPath();
            context.moveTo(x, y);
        }

function stopDrawing() {
            isDrawing = false;
            context.beginPath();
        }

function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }
    </script>
</body>
</html>
```

Hope you enjoy creating your own artwork with this drawing game!