@import url(‘https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap’);
html{
font-family: sans-serif;
}
#canvasWrapper {
position: relative;
max-width: 500px;
}

.canvas{
background-color: #E10E0E;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
right: 0;
top: 0;
width: 500px;
height: 500px;
}

.canvas::before{
position: absolute; content:url(‘http://nartshirt.shop/wp-content/uploads/2023/08/sq-mocks.png’);
z-index:100;
height: 500px;
width: 500px;
pointer-events: none;

}

@media only screen and (max-width: 1020px) {
.canvas {
/* transform-origin: -10px -10px;
transform:scale(.8);
padding:16px; */
position: relative;
}
}
.bg-controls{
display: flex;
gap: 6px;
flex-direction: column;
}
label{
font-size: 12px;
margin: 0px !important;
}
.textip{
widt: 100%;
min-width: 220px;
border-radius: 6px;
height: 36px;
padding: 0 !important;
border: none;
}
.textip:active,select:active{
border: 0px;
box-shadow: inset 0px 0px 0px 2.2px #0cad7d;
outline: none;
}
.textip:focus,.textip:focus-visible,select:focus,select:focus-visible{
border: 0px;
box-shadow: inset 0px 0px 0px 2.2px #0cad7d;
outline: none;
}
#textFontPicker{
position: relative;
border-radius: 6px;
width: 100%;
height: 36px;
padding: 2px 12px;
/* -moz-appearance:none; /* Firefox
-webkit-appearance:none; /* Safari and Chrome
appearance:none; */
}

.colorip{
padding: 0 2px !important;
width: 100%
}
#tshirtCanvas {
position: absolute;
border: 1px solid #ccc;
}
.label-color{
/* font-size: 12px; */
}
.flex{
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.button{
/* flex: 1; */
background: #205060;
color: white;
font-weight: 600;
height: 36px;
border: 0px;
padding: 0px 12px;
border-radius: 6px;
transition: all 300ms ease;
}
.button:hover{
background: #356575;
}
.button:active{
background: #306070;
}
#designPanel {
display: flex;
flex-direction: column;
gap: 12px;
/*position: absolute;*/
top: 10px;
right: 10px;
background-color: #333;
color: #fff;
padding: 10px;
border-radius: 5px;
}
.text-controls{
width: 100%;
display: flex;
gap: 12px;
flex-direction: column;
}
.text-controls>* ,
.controls > *{
/* margin: 5px; */
height 36px;
}

.design-library {
margin-top:5px;
display: flex;
flex-wrap: wrap;
}

.design-thumb {
width: 50px;
height: 50px;
margin: 5px;
cursor: pointer;
}

.text-controls {
margin-top: 0px;
}

Tshirt color

<!– –>

Text Color

Font

Arial
Times New Roman
Helvetica
Roboto
Bebas Neue
Lobster
Pacifico
Montserrat
Oswald
Quicksand
Playfair Display
Cabin
Raleway

<!– –>

// Add a function to load and add a design from the library
function addDesignToCanvas(url) {
fabric.Image.fromURL(url, function (img) {
canvas.add(img);
img.center();
canvas.sendToBack(img);
canvas.setActiveObject(img);
canvas.renderAll();
});
}

// Event listeners for design thumbnails
const designThumbs = document.querySelectorAll(“.design-thumb”);
designThumbs.forEach((thumb) => {
thumb.addEventListener(“click”, function () {
addDesignToCanvas(this.src);
});
});

// Function to add text to the canvas
function addText() {
const text = new fabric.IText(“Your Text”, {
left: 250,
top: 100,
fontSize: 30,
fill: “#000000”,
});
canvas.add(text);
canvas.sendToFront(text);
canvas.setActiveObject(text);
canvas.renderAll();
}

// Function to add text with selected font and color
function addText() {
const textInput = document.getElementById(“textInput”);
const fontPicker = document.getElementById(“textFontPicker”);
const textColorPicker = document.getElementById(“textColorPicker”);

const selectedFont = fontPicker.value;
const selectedColor = textColorPicker.value;
const text = textInput.value;

if(text==””){
const text = new fabric.IText(“Your Text”, {
left: 50,
top: 100,
fontSize: 30,
fontFamily: selectedFont,
fill: selectedColor,
});
canvas.add(text);
canvas.sendToBack(text);
canvas.setActiveObject(text);
canvas.renderAll();
}
else{
const textadd = new fabric.IText(text, {
left: 50,
top: 100,
fontFamily: selectedFont,
fill: selectedColor,
fontSize: 30,
});
canvas.add(textadd);
canvas.sendToBack(textadd);
canvas.setActiveObject(textadd);
canvas.renderAll();
}
}

// Function to apply text with selected font and color
function applyText() {
const textInput = document.getElementById(“textInput”);
const fontPicker = document.getElementById(“textFontPicker”);
const textColorPicker = document.getElementById(“textColorPicker”);

const selectedFont = fontPicker.value;
const selectedColor = textColorPicker.value;
const text = textInput.value;

const activeObject = canvas.getActiveObject();

if (activeObject && activeObject.type === “i-text”) {
activeObject.set({
fontFamily: selectedFont,
fill: selectedColor,
});
canvas.renderAll();
}
}

// Event listeners for buttons
// const addTextBtn = document.getElementById(“addTextBtn”);
// addTextBtn.addEventListener(“click”, addText);
function deleteSelectedObject() {
const activeObject = canvas.getActiveObject();
if (activeObject) {
canvas.remove(activeObject);
canvas.discardActiveObject();
canvas.renderAll();
}
}
// Event listener for the “Delete” key and “Backspace” key
document.addEventListener(“keydown”, function (event) {
if (event.key === “Delete”) {
deleteSelectedObject();
}
});

const applyTextBtn = document.getElementById(“applyTextBtn”);
applyTextBtn.addEventListener(“click”, applyText);
const addTextBtn = document.getElementById(“addTextBtn”);
addTextBtn.addEventListener(“click”, addText);
const uploadDesignBtn = document.getElementById(“uploadDesignBtn”);
const designFileInput = document.getElementById(“designFileInput”);
uploadDesignBtn.addEventListener(“click”, function () {
designFileInput.click();
});
// Function to apply the background color to the canvas
function applyBackgroundColor() {
const bgColorPicker = document.getElementById(“bgColorPicker”);
const bgColor = bgColorPicker.value;
canvas.setBackgroundColor(bgColor, canvas.renderAll.bind(canvas));
}

// Event listener for background color picker
const bgColorPicker = document.getElementById(“bgColorPicker”);
bgColorPicker.addEventListener(“change”, applyBackgroundColor);

// Event listener for design file input
designFileInput.addEventListener(“change”, function () {
const file = this.files[0];
const reader = new FileReader();
reader.onload = function (event) {
const url = event.target.result;
addDesignToCanvas(url);
};
reader.readAsDataURL(file);
});

const deleteBtn = document.getElementById(“deleteBtn”);
deleteBtn.addEventListener(“click”, function () {
deleteSelectedObject()
});
});

Shop

Deadpool playing guitar roundneck tshirt

Not your real Tshirt

Product