Make a art app where you can draw with every color in the rainbow's game

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

No:24768

←

Prev Next

→

Make a art app where you can draw with every color..ALL
Developer User11847｜Date and time 23/11/12 1:44:13
Build time 64.73 sec｜Game capacity 3.397KB｜

Script

Sure! Here's an example of an art app implemented as a single HTML file using JavaScript. You can draw with different colors by selecting them from the rainbow color palette. Simply open this HTML file in a web browser, and you can start drawing on the canvas using your smartphone's touch screen.

Please note that this is a basic implementation and can be expanded further with additional features, such as brush sizes, eraser, and more.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Rainbow Art App</title>
    <style>
      canvas {
        border: 1px solid black;
        touch-action: none;
      }
    </style>
  </head>
  <body>
    <canvas id="drawingCanvas"></canvas>

// Set canvas size to fill the screen
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

let isDrawing = false;
        let currentColor = "#000000"; // Starting color (black)

// Event listeners for touch and mouse actions
        canvas.addEventListener("mousedown", startDrawing);
        canvas.addEventListener("mouseup", stopDrawing);
        canvas.addEventListener("mousemove", draw);
        canvas.addEventListener("touchstart", startDrawing);
        canvas.addEventListener("touchend", stopDrawing);
        canvas.addEventListener("touchmove", draw);

// Update current color when a color is clicked in the rainbow
        function updateColor(color) {
          currentColor = color;
        }

// Start drawing
        function startDrawing() {
          isDrawing = true;
        }

// Stop drawing
        function stopDrawing() {
          isDrawing = false;
        }

// Draw on canvas
        function draw(event) {
          if (!isDrawing) return;
          
          // Get touch/mouse coordinates
          let x, y;
          if (event.touches) {
            x = event.touches[0].clientX;
            y = event.touches[0].clientY;
          } else {
            x = event.clientX;
            y = event.clientY;
          }

// Draw on canvas
          context.beginPath();
          context.lineWidth = 5;
          context.lineCap = "round";
          context.strokeStyle = currentColor;
          context.lineTo(x, y);
          context.stroke();
        }
        
        // Dynamically generate the rainbow color palette
        const rainbowColors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
        const colorsContainer = document.createElement("div");
        
        rainbowColors.forEach(color => {
          const colorBlock = document.createElement("div");
          colorBlock.style.backgroundColor = color;
          colorBlock.style.width = "30px";
          colorBlock.style.height = "30px";
          colorBlock.style.borderRadius = "50%";
          colorBlock.style.display = "inline-block";
          colorBlock.style.marginRight = "5px";
          colorBlock.addEventListener("click", () => updateColor(color));
          
          colorsContainer.appendChild(colorBlock);
        });
        
        document.body.appendChild(colorsContainer);
      });
    </script>
  </body>
</html>
```

Please note that this is a basic implementation and can be expanded further with additional features, such as brush sizes, eraser, and more.