  
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Custom T-Shirt Designer</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="designer-container">
    <h2>Customize Your T-Shirt</h2>

    <!-- Shirt color selection -->
    <div id="shirt-colors">
      <button class="shirt-color-btn" data-color="black">Black</button>
      <button class="shirt-color-btn" data-color="white">White</button>
      <button class="shirt-color-btn" data-color="gray">Gray</button>
    </div>

    <!-- Canvas for design -->
    <canvas id="tshirt-canvas" width="500" height="600"></canvas>

    <!-- Toolbar -->
    <div id="toolbar">
      <input type="file" id="upload-image">
      <input type="text" id="text-input" placeholder="Add text">
      <input type="color" id="text-color">
      <button id="add-text-btn">Add Text</button>
      <button id="download-btn">Download PNG</button>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  margin: 20px;
}

#designer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
}

h2 {
  margin-bottom: 10px;
}

#shirt-colors {
  margin-bottom: 15px;
}

.shirt-color-btn {
  margin: 0 5px;
  padding: 8px 14px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  color: #fff;
}

.shirt-color-btn[data-color="black"] { background: #000; }
.shirt-color-btn[data-color="white"] { background: #ccc; color: #000; }
.shirt-color-btn[data-color="gray"] { background: #777; }

#tshirt-canvas {
  border: 1px solid #ccc;
  background: url('images/black.png') no-repeat center/contain;
}

#toolbar {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

button, input[type="text"], input[type="color"] {
  padding: 8px 12px;
  font-size: 14px;
}
const canvas = document.getElementById('tshirt-canvas');
const ctx = canvas.getContext('2d');

let layers = []; // stores images and text
let currentShirt = 'black';

// Shirt color selection
document.querySelectorAll('.shirt-color-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    currentShirt = btn.dataset.color;
    canvas.style.background = `url('images/${currentShirt}.png') no-repeat center/contain`;
  });
});

// Upload Image
document.getElementById('upload-image').addEventListener('change', function(e){
  const file = e.target.files[0];
  if(!file) return;
  const img = new Image();
  img.onload = () => {
    layers.push({type:'image', img: img, x:50, y:50, scale:1, rotation:0});
    drawCanvas();
  };
  img.src = URL.createObjectURL(file);
});

// Add Text
document.getElementById('add-text-btn').addEventListener('click', () => {
  const text = document.getElementById('text-input').value;
  const color = document.getElementById('text-color').value;
  if(!text) return;
  layers.push({type:'text', text: text, x:100, y:100, color: color, fontSize: 24});
  drawCanvas();
});

// Draw Canvas
function drawCanvas() {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  
  // draw shirt background
  const shirtBg = new Image();
  shirtBg.src = `images/${currentShirt}.png`;
  ctx.drawImage(shirtBg, 0, 0, canvas.width, canvas.height);

  layers.forEach(layer => {
    if(layer.type==='image') {
      ctx.save();
      ctx.translate(layer.x, layer.y);
      ctx.scale(layer.scale, layer.scale);
      ctx.drawImage(layer.img,0,0);
      ctx.restore();
    }
    if(layer.type==='text') {
      ctx.font = `${layer.fontSize}px Arial`;
      ctx.fillStyle = layer.color;
      ctx.fillText(layer.text, layer.x, layer.y);
    }
  });
}

// Download Design
document.getElementById('download-btn').addEventListener('click', () => {
  const link = document.createElement('a');
  link.download = 'custom-tshirt.png';
  link.href = canvas.toDataURL('image/png');
  link.click();
});

// OPTIONAL: Add drag/scale/rotate (advanced features can be added here)
<form action="/api/commerce/cart/add" method="POST">
  <input type="hidden" name="variantId" value="YOUR_PRODUCT_VARIANT_ID">
  <input type="hidden" name="quantity" value="1">
  <button type="submit">Add to Cart</button>
</form>

  
Location

Contact
