.drawing-area{
position: absolute;
top: 60px;
left: 122px;
z-index: 10;
width: 200px;
height: 400px;
}
.canvas-container{
width: 200px;
height: 400px;
position: relative;
user-select: none;
}
#tshirt-div{
width: 452px;
height: 548px;
position: relative;
background-color: #fff;
}
#canvas{
position: absolute;
width: 200px;
height: 400px;
left: 0px;
top: 0px;
user-select: none;
cursor: default;
}
// Select the canvas an make it accesible for all the snippets of this article
let canvas = new fabric.Canvas('tshirt-canvas');
/**
* Method that defines a picture as background image of the canvas.
*
* @param {String} imageUrl The server URL of the image that you want to load on the T-Shirt.
*
* @return {void} Return value description.
*/
function updateTshirtImage(imageURL){
// If the user doesn't pick an option of the select, clear the canvas
if(!imageURL){
canvas.clear();
}
// Create a new image that can be used in Fabric with the URL
fabric.Image.fromURL(imageURL, function(img) {
// Define the image as background image of the Canvas
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
// Scale the image to the canvas size
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
});
}
// 1. When the T-Shirt color select changes:
// Update the TShirt color according to the selected color by the user
document.getElementById("tshirt-color").addEventListener("change", function(){
document.getElementById("tshirt-div").style.backgroundColor = this.value;
}, false);
// 2. When the user picks a design:
// Update the TShirt background image according to the selected image by the user
document.getElementById("tshirt-design").addEventListener("change", function(){
// Call the updateTshirtImage method providing as first argument the URL
// of the image provided by the select
updateTshirtImage(this.value);
}, false);