When Code Meets the Spray Can: How I Built an AI Graffiti Generator

2025-08-04

Street graffiti, a raw art form born in the corners of the city, is filled with mystery, rebellion, and untamed creativity. It is both an anonymous declaration and a vibrant splash of color in the urban landscape. But for most of us, picking up a real spray can to create on a midnight wall is perhaps a distant and daring dream.

What if there was a way for every one of us to experience this creative thrill safely and legally? This is the very reason I created this project: an AI Graffiti Generator that transforms your textual imagination into unique street art sprayed onto a virtual brick wall.

#The Spark: Where Code and Art Collide

I’ve always been fascinated by generative art and street culture. As AI image generation technologies like DALL-E 3 and Midjourney became increasingly powerful, a thought flashed in my mind: why not let AI become our digital “spray can”?

This project aims to break down the barriers to artistic creation. You don’t need any drawing skills, nor do you have to worry about being chased by the police. All you need is an idea, a line of text, to become a “digital graffiti artist.”

#Unpacking the Tech Stack

To turn this idea into reality, I chose a modern and efficient tech stack, which is reflected in my project’s graffiti-app directory:

Frontend Framework: Next.js (React) - Its powerful Server-Side Rendering (SSR) and Static Site Generation (SSG) capabilities provide the application with excellent performance and a great development experience.
Language: TypeScript - By adding static types to JavaScript, the configuration in tsconfig.json makes our code more robust and easier to maintain.
Core Canvas: React Component (src/components/GraffitiCanvas.tsx) - This is the core stage where we work our magic. I used React to wrap the HTML Canvas, which hosts the background wall and the AI-generated graffiti.
AI Model Interface: On the backend, I set up an API route to connect to a third-party AI image generation service (like the APIs for Stable Diffusion or DALL-E 3). This allows for secure management of API keys, avoiding exposure on the frontend.
Visual Assets: The brick-wall.jpg in the project’s public directory serves as our default canvas, creating that classic street vibe.

#Implementation Highlights: Three Steps to “Spraying” the Wall

The core logic of the application can be broken down into three steps:

#1. Setting the Scene

First, in the GraffitiCanvas.tsx component, I created a two-layer structure:

Bottom Layer: A <div> element with brick-wall.jpg as its background image, simulating a real textured wall.
Top Layer: An absolutely positioned HTML <canvas> element overlaid on top of the background. This canvas is where we will do our “spraying.”

#2. Connecting to the AI Brain

To process user input and generate an image, I utilized Next.js’s API Routes feature to create a server-side endpoint.

The frontend page (src/app/page.tsx) collects the user’s input prompt.
A fetch request sends the prompt to the backend API route.
The backend API, upon receiving the request, calls the AI image generation model’s API with a carefully crafted instruction, such as “a graffiti of [user input], spray-painted on a brick wall, vibrant colors, street art style.”
The AI model returns the generated image URL, which the backend then sends back to the frontend.

#3. The Magic of “Spraying” the Graffiti

This is the most interesting part. When the browser receives the AI-generated image URL, it doesn’t just simply paste the image. To make the graffiti look like it was actually “sprayed” onto a textured brick wall, I used a key feature of the Canvas API:

const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
const image = new Image();
image.src = generatedImageUrl;

image.onload = () => {
  // Clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // The key! Set the blend mode
  ctx.globalCompositeOperation = 'overlay'; 
  
  // Draw the image onto the canvas
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
};

ctx.globalCompositeOperation = 'overlay'; is the masterstroke here. It blends the drawn image with the existing content of the canvas (which is transparent in this case, but the effect applies to the CSS background below). This allows the light and dark parts of the image to interact with the brick texture of the background, creating a realistic texture of paint seeping into the wall, rather than just a flat image pasted on top.

#The Showcase

Imagine typing “a robot cat wearing a crown” into the input box. A few seconds later, your screen displays this scene: a cyberpunk-style cat, crowned, “sprayed” onto an old brick wall with bold colors and lines, as if it has been there for years.

This is the magic of combining AI and code—it instantly visualizes your imagination.

#The Blueprint for the Future

This project is just the beginning, and the possibilities are endless:

More Wall Options: Add more backgrounds like concrete walls, rusty metal doors, or subway cars.
Custom “Spray” Styles: Allow users to choose different color themes, splatter effects, and brush thicknesses.
Community Gallery: Create a public page to showcase outstanding graffiti works created by the community.
AR Experience: The ultimate goal—use your phone’s camera to “project” your AI-created graffiti onto real-world walls around you!

#Conclusion

From a single line of code to a vibrant AI graffiti generator, this project has given me a profound appreciation for the immense potential of technology as a creative catalyst. It’s not just a fun application; it’s an experiment in the democratization of art.

I hope this project inspires you and sparks your own creative ideas. In the age of AI, combining technology with art might just be the next great venture.