// JavaScript Document var canvas = new fabric.Canvas('shirtcanvas'); var canvast = new fabric.Canvas('trousercanvas'); var cans = $('#shirtcanvas').parent('.canvas-container'); var cant = $('#trousercanvas').parent('.canvas-container'); cant.css('display','none'); document.getElementById('backlogosb').style.display="none"; $('#showFront').click(function() { cans.css('display','block'); cant.css('display','none'); canvas.calcOffset(); canvast.calcOffset(); $('#showFront').addClass('active'); $('#showBack').removeClass('active'); //updateControls(); document.getElementById('frontlogosb').style.display="block"; document.getElementById('backlogosb').style.display="none"; }); $('#showBack').click(function() { cans.css('display','none'); cant.css('display','block'); canvas.calcOffset(); canvast.calcOffset(); $('#showFront').removeClass('active'); $('#showBack').addClass('active'); //updateControls(); document.getElementById('frontlogosb').style.display="none"; document.getElementById('backlogosb').style.display="block"; }); $('html').keyup(function(e){ if(e.which == 46) { if(cans.css('display')=="block") { var obd = canvas.getActiveObject(); canvas.remove(obd); } else if(cant.css('display')=="block") { var obd = canvast.getActiveObject(); canvast.remove(obd); } } }); function loadBaseShirts() { color1 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-51.15 10.61l47.96 0 0 580.66 -544.3 0 0 -3.35 -47.18 0 0 -581.04 543.52 0 0 3.73zm-498.85 580.22l-50 0 0 9.17 50 0 0 -9.17z');color2 = new fabric.Path('M543.65 446.54l-0.47 2.52c-0.17,0.9 -0.02,1.72 0.25,2.42l19.02 50.24 -15.03 -52.05c-0.27,-0.92 -0.22,-1.77 -0.02,-2.55l13.3 -53.82 -17.05 53.24 0 0zm-297.67 -396.12l1.96 1.37 -30.29 17.03c-6.46,3.83 -7.09,4.65 -10.73,7.65l41.89 -24.07 3.06 2.15 -34.22 19.22c-6.46,3.84 -7.09,4.65 -10.73,7.66l45.77 -26.3 3.08 2.18c-0.33,0.21 -0.67,0.38 -1.01,0.57l-37.11 20.85c-6.46,3.83 -7.09,4.65 -10.73,7.65l49.63 -28.52 2.28 1.62 -0.46 0.27c-1.28,0.74 -0.81,0.47 -1.58,1.55 -0.58,0.81 -1.31,1.13 -2.03,1.53l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l53.49 -30.74 2.27 1.62 -0.01 0 -4.3 2.49c-1.28,0.74 -0.81,0.47 -1.58,1.54 -0.58,0.82 -1.31,1.14 -2.03,1.54l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l57.33 -32.95 2.26 1.61 -8.14 4.7c-1.28,0.74 -0.81,0.48 -1.58,1.55 -0.58,0.82 -1.31,1.13 -2.03,1.54l-37.11 20.85c-6.46,3.83 -7.09,4.65 -10.73,7.65l61.18 -35.15 2.23 1.6 0 0 -11.96 6.92c-1.28,0.74 -0.81,0.47 -1.58,1.54 -0.58,0.82 -1.31,1.14 -2.03,1.54l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l65.01 -37.36 2.22 1.6 -15.78 9.12c-1.28,0.74 -0.81,0.48 -1.58,1.55 -0.58,0.82 -1.31,1.13 -2.03,1.54l-37.11 20.85c-6.46,3.83 -7.09,4.65 -10.73,7.65l68.84 -39.56 2.21 1.6 -19.6 11.33c-1.28,0.74 -0.81,0.47 -1.58,1.55 -0.58,0.81 -1.31,1.13 -2.03,1.53l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l72.67 -41.76 2.19 1.59 -23.41 13.54c-1.28,0.74 -0.81,0.47 -1.58,1.54 -0.58,0.82 -1.31,1.14 -2.03,1.54l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.65l76.49 -43.95 2.19 1.58 -27.23 15.74c-1.28,0.74 -0.81,0.47 -1.58,1.55 -0.58,0.82 -1.31,1.13 -2.03,1.53l-37.11 20.85c-6.46,3.84 -7.09,4.66 -10.73,7.66l80.31 -46.15 2.18 1.57 -31.04 17.95c-1.28,0.74 -0.81,0.47 -1.58,1.54 -0.58,0.82 -1.31,1.14 -2.03,1.54l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l84.13 -48.35 1.05 0.76c0.36,0.26 0.71,0.53 1.04,0.82l-34.77 20.13c-1.28,0.74 -0.81,0.48 -1.58,1.55 -0.58,0.82 -1.31,1.13 -2.03,1.54l-37.11 20.85c-6.46,3.83 -7.09,4.65 -10.73,7.65l87.57 -50.36c0.54,0.61 1.02,1.28 1.44,1.98l-37.56 21.75c-1.28,0.74 -0.81,0.47 -1.58,1.55 -0.58,0.81 -1.31,1.13 -2.03,1.53l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l89.86 -51.68c0.33,0.75 0.59,1.54 0.79,2.37l-39.2 22.67c-1.28,0.75 -0.81,0.48 -1.58,1.55 -0.58,0.82 -1.31,1.14 -2.03,1.54l-37.11 20.85c-6.46,3.83 -7.09,4.65 -10.73,7.65l91 -52.32c0.11,0.91 0.15,1.85 0.12,2.83l-39.67 22.86c-1.28,0.74 -0.81,0.47 -1.58,1.55 -0.58,0.82 -1.31,1.13 -2.03,1.53l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l90.93 -52.2c-0.14,1.01 -0.36,2.05 -0.65,3.11l-38.83 22.46c-1.28,0.74 -0.81,0.47 -1.58,1.54 -0.58,0.82 -1.31,1.14 -2.03,1.54l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l89.43 -51.42 -0.09 0.23 -1.3 3.4 -36.59 21.15c-1.28,0.74 -0.81,0.47 -1.58,1.55 -0.58,0.82 -1.31,1.13 -2.03,1.54l-37.11 20.84c-6.46,3.84 -7.09,4.66 -10.73,7.66l86.99 -50.01 -1.43 3.74 -34.11 19.64c-1.28,0.74 -0.81,0.47 -1.58,1.55 -0.58,0.81 -1.31,1.13 -2.03,1.53l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l84.51 -48.51 -1.36 3.54 -31.7 18.33c-1.28,0.74 -0.81,0.48 -1.58,1.55 -0.58,0.82 -1.31,1.13 -2.03,1.54l-37.11 20.85c-6.46,3.83 -7.09,4.65 -10.73,7.65l82.1 -47.18 -1.39 3.63 -29.26 16.92c-1.28,0.74 -0.81,0.47 -1.58,1.55 -0.58,0.81 -1.31,1.13 -2.03,1.53l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l79.66 -45.78 -1.4 3.64 -26.81 15.51c-1.28,0.74 -0.81,0.47 -1.58,1.54 -0.58,0.82 -1.31,1.14 -2.03,1.54l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l77.22 -44.39 -1.4 3.66 -24.37 14.09c-1.28,0.74 -0.81,0.47 -1.58,1.55 -0.58,0.82 -1.31,1.13 -2.03,1.53l-37.11 20.85c-6.46,3.84 -7.09,4.66 -10.73,7.66l74.78 -42.98 -1.41 3.67 -21.92 12.68c-1.28,0.74 -0.81,0.47 -1.58,1.54 -0.58,0.82 -1.31,1.14 -2.03,1.54l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l72.34 -41.58 -1.41 3.68 -19.48 11.26c-1.28,0.74 -0.81,0.48 -1.58,1.55 -0.58,0.82 -1.31,1.13 -2.03,1.54l-37.11 20.85c-6.46,3.83 -7.09,4.65 -10.73,7.65l69.9 -40.17 -1.42 3.69 -17.03 9.85c-1.28,0.74 -0.81,0.47 -1.58,1.55 -0.58,0.81 -1.31,1.13 -2.03,1.53l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l67.46 -38.77 -1.42 3.7 -14.59 8.44c-1.28,0.74 -0.81,0.47 -1.58,1.54 -0.58,0.82 -1.31,1.14 -2.03,1.54l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.65l65.04 -37.37c-0.32,1.05 -0.37,2.07 -0.27,3.03l-13.32 7.71c-1.28,0.74 -0.81,0.47 -1.58,1.55 -0.58,0.81 -1.31,1.13 -2.03,1.53l-37.11 20.85c-6.46,3.84 -7.09,4.66 -10.73,7.66l65.13 -37.43 0.54 2.57 -14.22 8.23c-1.28,0.74 -0.81,0.47 -1.58,1.54 -0.58,0.82 -1.31,1.14 -2.03,1.54l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l66.06 -37.97 0.55 2.57 -15.16 8.76c-1.28,0.74 -0.81,0.48 -1.58,1.55 -0.58,0.82 -1.31,1.13 -2.03,1.54l-37.11 20.85c-6.46,3.83 -7.09,4.65 -10.73,7.65l67 -38.5 0.55 2.56 -16.1 9.31c-1.28,0.74 -0.81,0.47 -1.58,1.55 -0.58,0.81 -1.31,1.13 -2.03,1.53l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l67.94 -39.05 0.54 2.56 -17.03 9.85c-1.28,0.75 -0.81,0.48 -1.58,1.55 -0.58,0.82 -1.31,1.13 -2.03,1.54l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.65l68.88 -39.58 0.54 2.56 -17.97 10.39c-1.28,0.74 -0.81,0.47 -1.58,1.55 -0.58,0.81 -1.31,1.13 -2.03,1.53l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l69.81 -40.12 0.55 2.55 -18.91 10.94c-1.28,0.74 -0.81,0.47 -1.58,1.54 -0.58,0.82 -1.31,1.14 -2.03,1.54l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l70.75 -40.66 0.54 2.55 -19.84 11.47c-1.28,0.74 -0.81,0.47 -1.58,1.55 -0.58,0.82 -1.31,1.13 -2.03,1.54l-37.11 20.84c-6.46,3.84 -7.09,4.66 -10.73,7.66l71.69 -41.2 0.54 2.55 -20.78 12.02c-1.28,0.74 -0.81,0.47 -1.58,1.54 -0.58,0.82 -1.31,1.14 -2.03,1.54l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l72.63 -41.74 0.54 2.54 -21.72 12.56c-1.28,0.75 -0.81,0.48 -1.58,1.55 -0.58,0.82 -1.31,1.13 -2.03,1.54l-37.11 20.85c-6.46,3.83 -7.09,4.65 -10.73,7.65l73.56 -42.27 0.54 2.54 -22.65 13.1c-1.28,0.74 -0.81,0.47 -1.58,1.55 -0.58,0.81 -1.31,1.13 -2.03,1.53l-37.11 20.85c-6.46,3.84 -7.09,4.65 -10.73,7.66l74.5 -42.82 10.68 50.29 -12.22 -97.36c-0.21,-1.72 0.15,-3.22 0.74,-4.54l26.92 -59.71c2.49,-7.63 1.63,-15.03 -1.48,-21.83 -2.63,-5.75 -26.18,-24.32 -50.68,-44.74 -0.57,0.95 -1.2,1.92 -1.87,2.92 -2.12,3.11 -4.62,5.89 -7.53,8.37zm-93.73 0l-1.96 1.37 30.29 17.03c6.46,3.83 7.1,4.65 10.73,7.65l-41.89 -24.07 -3.06 2.15 34.22 19.22c6.46,3.84 7.1,4.65 10.73,7.66l-45.76 -26.3 -3.08 2.18c0.32,0.21 0.66,0.38 1,0.57l37.11 20.85c6.46,3.83 7.1,4.65 10.73,7.65l-49.63 -28.52 -2.28 1.62 0.46 0.27c1.28,0.74 0.81,0.47 1.58,1.55 0.59,0.81 1.31,1.13 2.03,1.53l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-53.48 -30.74 -2.27 1.62 0 0 4.3 2.49c1.28,0.74 0.81,0.47 1.58,1.54 0.59,0.82 1.31,1.14 2.03,1.54l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-57.33 -32.95 -2.26 1.61 8.14 4.7c1.28,0.74 0.81,0.48 1.58,1.55 0.59,0.82 1.31,1.13 2.03,1.54l37.11 20.85c6.46,3.83 7.1,4.65 10.73,7.65l-61.17 -35.15 -2.24 1.6 0 0 11.96 6.92c1.28,0.74 0.81,0.47 1.58,1.54 0.59,0.82 1.31,1.14 2.03,1.54l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-65.01 -37.36 -2.22 1.6 15.78 9.12c1.28,0.74 0.81,0.48 1.58,1.55 0.59,0.82 1.31,1.13 2.03,1.54l37.11 20.85c6.46,3.83 7.1,4.65 10.73,7.65l-68.84 -39.56 -2.21 1.6 19.6 11.33c1.28,0.74 0.81,0.47 1.58,1.55 0.59,0.81 1.31,1.13 2.03,1.53l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-72.66 -41.76 -2.2 1.59 23.41 13.54c1.28,0.74 0.81,0.47 1.58,1.54 0.59,0.82 1.31,1.14 2.03,1.54l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.65l-76.49 -43.95 -2.18 1.58 27.22 15.74c1.28,0.74 0.81,0.47 1.58,1.55 0.59,0.82 1.31,1.13 2.03,1.53l37.11 20.85c6.46,3.84 7.1,4.66 10.73,7.66l-80.31 -46.15 -2.17 1.57 31.03 17.95c1.28,0.74 0.81,0.47 1.58,1.54 0.59,0.82 1.31,1.14 2.03,1.54l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-84.13 -48.35 -1.05 0.76c-0.36,0.26 -0.71,0.53 -1.04,0.82l34.77 20.13c1.28,0.74 0.81,0.48 1.58,1.55 0.59,0.82 1.31,1.13 2.03,1.54l37.11 20.85c6.46,3.83 7.1,4.65 10.73,7.65l-87.57 -50.36c-0.54,0.61 -1.02,1.28 -1.44,1.98l37.56 21.75c1.28,0.74 0.81,0.47 1.58,1.55 0.59,0.81 1.31,1.13 2.03,1.53l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-89.86 -51.68c-0.33,0.75 -0.59,1.54 -0.79,2.37l39.2 22.67c1.28,0.75 0.81,0.48 1.58,1.55 0.59,0.82 1.31,1.14 2.03,1.54l37.11 20.85c6.46,3.83 7.1,4.65 10.73,7.65l-91 -52.32c-0.11,0.91 -0.15,1.85 -0.12,2.83l39.67 22.86c1.28,0.74 0.81,0.47 1.58,1.55 0.59,0.82 1.31,1.13 2.03,1.53l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-90.93 -52.2c0.14,1.01 0.36,2.05 0.65,3.11l38.83 22.46c1.28,0.74 0.81,0.47 1.58,1.54 0.59,0.82 1.31,1.14 2.03,1.54l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-89.43 -51.42 0.09 0.23 1.3 3.4 36.59 21.15c1.28,0.74 0.81,0.47 1.58,1.55 0.59,0.82 1.31,1.13 2.03,1.54l37.11 20.84c6.46,3.84 7.1,4.66 10.73,7.66l-86.99 -50.01 1.43 3.74 34.11 19.64c1.28,0.74 0.81,0.47 1.58,1.55 0.59,0.81 1.31,1.13 2.03,1.53l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-84.51 -48.51 1.36 3.54 31.7 18.33c1.28,0.74 0.81,0.48 1.58,1.55 0.59,0.82 1.31,1.13 2.03,1.54l37.11 20.85c6.46,3.83 7.1,4.65 10.73,7.65l-82.1 -47.18 1.39 3.63 29.26 16.92c1.28,0.74 0.81,0.47 1.58,1.55 0.59,0.81 1.31,1.13 2.03,1.53l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-79.66 -45.78 1.4 3.64 26.81 15.51c1.28,0.74 0.81,0.47 1.58,1.54 0.59,0.82 1.31,1.14 2.03,1.54l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-77.22 -44.39 1.4 3.66 24.37 14.09c1.28,0.74 0.81,0.47 1.58,1.55 0.59,0.82 1.31,1.13 2.03,1.53l37.11 20.85c6.46,3.84 7.1,4.66 10.73,7.66l-74.78 -42.98 1.41 3.67 21.92 12.68c1.28,0.74 0.81,0.47 1.58,1.54 0.59,0.82 1.31,1.14 2.03,1.54l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-72.34 -41.58 1.41 3.68 19.48 11.26c1.28,0.74 0.81,0.48 1.58,1.55 0.59,0.82 1.31,1.13 2.03,1.54l37.11 20.85c6.46,3.83 7.1,4.65 10.73,7.65l-69.9 -40.17 1.42 3.69 17.03 9.85c1.28,0.74 0.81,0.47 1.58,1.55 0.59,0.81 1.31,1.13 2.03,1.53l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-67.46 -38.77 1.42 3.7 14.59 8.44c1.28,0.74 0.81,0.47 1.58,1.54 0.59,0.82 1.31,1.14 2.03,1.54l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.65l-65.04 -37.37c0.32,1.05 0.37,2.07 0.27,3.03l13.32 7.71c1.28,0.74 0.81,0.47 1.58,1.55 0.59,0.81 1.31,1.13 2.03,1.53l37.11 20.85c6.46,3.84 7.1,4.66 10.73,7.66l-65.12 -37.43 -0.55 2.57 14.22 8.23c1.28,0.74 0.81,0.47 1.58,1.54 0.59,0.82 1.31,1.14 2.03,1.54l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-66.06 -37.97 -0.55 2.57 15.16 8.76c1.28,0.74 0.81,0.48 1.58,1.55 0.59,0.82 1.31,1.13 2.03,1.54l37.11 20.85c6.46,3.83 7.1,4.65 10.73,7.65l-67 -38.5 -0.54 2.56 16.09 9.31c1.28,0.74 0.81,0.47 1.58,1.55 0.59,0.81 1.31,1.13 2.03,1.53l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-67.94 -39.05 -0.54 2.56 17.03 9.85c1.28,0.75 0.81,0.48 1.58,1.55 0.59,0.82 1.31,1.13 2.03,1.54l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.65l-68.88 -39.58 -0.54 2.56 17.97 10.39c1.28,0.74 0.81,0.47 1.58,1.55 0.59,0.81 1.31,1.13 2.03,1.53l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-69.81 -40.12 -0.55 2.55 18.91 10.94c1.28,0.74 0.81,0.47 1.58,1.54 0.59,0.82 1.31,1.14 2.03,1.54l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-70.75 -40.66 -0.54 2.55 19.84 11.47c1.28,0.74 0.81,0.47 1.58,1.55 0.59,0.82 1.31,1.13 2.03,1.54l37.11 20.84c6.46,3.84 7.1,4.66 10.73,7.66l-71.69 -41.2 -0.54 2.55 20.78 12.02c1.28,0.74 0.81,0.47 1.58,1.54 0.59,0.82 1.31,1.14 2.03,1.54l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-72.63 -41.74 -0.54 2.54 21.72 12.56c1.28,0.75 0.81,0.48 1.58,1.55 0.59,0.82 1.31,1.13 2.03,1.54l37.11 20.85c6.46,3.83 7.1,4.65 10.73,7.65l-73.56 -42.27 -0.54 2.54 22.65 13.1c1.28,0.74 0.81,0.47 1.58,1.55 0.59,0.81 1.31,1.13 2.03,1.53l37.11 20.85c6.46,3.84 7.1,4.65 10.73,7.66l-74.5 -42.82 -10.68 50.29 12.22 -97.36c0.21,-1.72 -0.15,-3.22 -0.74,-4.54l-26.92 -59.71c-2.49,-7.63 -1.63,-15.03 1.48,-21.83 2.63,-5.75 26.18,-24.32 50.68,-44.74 0.57,0.95 1.2,1.92 1.88,2.92 2.11,3.11 4.62,5.89 7.52,8.37zm39.06 21.1l-15.82 -9.1c1.58,0.48 3.19,0.91 4.81,1.28l0.28 0.16c6.46,3.84 7.1,4.65 10.73,7.66zm0 -4.96l-2.48 -1.43 0.88 0.09c0.48,0.4 1,0.84 1.6,1.34zm15.61 4.96l15.82 -9.1c-1.58,0.48 -3.18,0.91 -4.81,1.28l-0.28 0.16c-6.46,3.84 -7.09,4.65 -10.73,7.66zm0 -4.96l2.48 -1.43 -0.88 0.09c-0.48,0.4 -1,0.84 -1.6,1.34zm147.82 371.71l0.47 2.52c0.17,0.9 0.02,1.72 -0.25,2.42l-19.02 50.24 15.03 -52.05c0.26,-0.92 0.21,-1.77 0.02,-2.55l-13.3 -53.82 17.05 53.24 0 0z');color3 = new fabric.Path('M559.55 412.13l-15.66 60.01c-0.36,1.39 0.1,2.74 0.68,3.96l24.23 51.66 -18.14 -51.98c-0.75,-2.14 -0.91,-4.44 -0.52,-6.78l9.41 -56.87zm-420.15 -386.11c-0.52,4.79 1.17,10.13 5.09,15.71 6.94,9.87 16.32,15.99 27.5,19.32 20.21,6.01 38.06,5.97 53.96,0.32 12.48,-4.44 21.58,-10.52 27.56,-19.32 4.75,-7 6.98,-12.92 4.18,-16.16l-1.08 -9.91 -19.79 -4.95 -83.46 0.37 -9.28 4.78 -4.68 9.84zm174.72 81.15l-47.73 101.57c-1.1,2.35 -0.66,4.9 0.05,7.26l29.6 99.64 -18.09 -98.25c-0.74,-4.03 -0.33,-8.17 1.11,-12.21l35.06 -98.01zm-230.01 0l47.73 101.57c1.1,2.35 0.66,4.9 -0.04,7.26l-29.61 99.64 18.09 -98.25c0.74,-4.03 0.33,-8.17 -1.11,-12.21l-35.06 -98.01zm65.18 -80.74c9.67,1.65 18.19,2.73 29.59,3.48 9.52,0.63 20.45,1.01 31.97,0.85 8.92,-0.12 18.46,-0.95 28.84,-2.12 3.31,-0.37 6.3,-1.07 9.08,-1.88 -3.1,8.22 -5.5,11.38 -11.03,16.45 -6.44,5.9 -17.41,10.04 -31.58,12.08 -14.48,2.09 -33.86,-3 -45.61,-12.17 -5.03,-3.94 -9.13,-9.84 -11.26,-16.69zm189.54 377.43l15.66 60.01c0.36,1.39 -0.1,2.74 -0.67,3.96l-24.24 51.66 18.15 -51.98c0.74,-2.14 0.9,-4.44 0.51,-6.78l-9.41 -56.87z');logo1 = new fabric.Path('M0.91 1.09c0,0.01 -0.01,0.01 -0.01,0.01 0,0 0,0.01 -0.01,0.01l-0.03 0.03c-0.01,0 -0.02,0.01 -0.02,0.01l-0.1 0.1c0,0 0,0 -0.01,0 -0.01,0.02 -0.03,0.03 -0.04,0.04l-0.03 0.03c-0.01,0.01 -0.02,0.01 -0.02,0.02 -0.01,-0.01 -0.06,-0.07 -0.07,-0.08 -0.03,-0.03 -0.07,-0.08 -0.1,-0.11 -0.01,-0.01 -0.01,-0.02 -0.02,-0.02 0,-0.01 -0.01,-0.01 -0.01,-0.02 -0.03,-0.03 -0.05,-0.05 -0.07,-0.08 -0.03,-0.02 -0.08,-0.09 -0.11,-0.11 -0.07,-0.05 -0.14,-0.05 -0.22,-0.02 -0.01,0.01 -0.03,0.03 -0.04,0.03 0,0.01 0.05,0.07 0.06,0.07l0.07 0.08c0,0 0,0 0.01,0.01 0,0 0.01,0.01 0.01,0.01 0.01,0.01 0.02,0.02 0.02,0.03l0.04 0.04c0.05,0.05 0.1,0.1 0.14,0.16 0,0 0.01,0 0.01,0.01l0.09 0.1c0.01,0.01 0.02,0.02 0.02,0.03 0.01,0.01 0.02,0.01 0.03,0.02 0.04,0.03 0.09,0.06 0.16,0.05 0.05,0 0.09,-0.03 0.13,-0.06 0.02,-0.02 0.04,-0.04 0.07,-0.06l0.07 -0.07c0.02,-0.02 0.13,-0.11 0.13,-0.12 0.01,0 0.01,-0.01 0.02,-0.01 0.06,-0.1 0.05,-0.19 -0.02,-0.27l-0.15 -0.17c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03 0,0 -0.01,-0.01 -0.01,-0.01l-0.09 -0.1c-0.02,-0.02 -0.03,-0.04 -0.05,-0.06 -0.02,-0.02 -0.03,-0.04 -0.05,-0.05 -0.01,-0.02 -0.1,-0.11 -0.1,-0.12 -0.02,0.01 -0.05,0.07 -0.06,0.09 -0.02,0.06 -0.01,0.12 0.02,0.17 0.01,0.03 0.04,0.06 0.06,0.08 0.04,0.04 0.07,0.08 0.1,0.12l0.19 0.2c0.01,0.01 0.02,0.02 0.02,0.02zm-0.35 0.04c0,-0.01 0.01,-0.01 0.02,-0.02 0.04,-0.06 0.06,-0.12 0.04,-0.19 -0.02,-0.07 -0.05,-0.09 -0.09,-0.13l-0.03 -0.04c-0.01,0 -0.01,-0.01 -0.02,-0.02 -0.03,-0.02 -0.06,-0.06 -0.09,-0.09l-0.1 -0.11c-0.01,-0.01 -0.07,-0.07 -0.07,-0.08 0.01,0 0.01,-0.01 0.02,-0.01 0,-0.01 0,-0.01 0.01,-0.01l0.04 -0.04c0.01,-0.01 0.02,-0.02 0.03,-0.03 0.01,0 0.01,-0.01 0.02,-0.01l0.12 -0.11c0,-0.01 0.02,-0.03 0.03,-0.03l0.08 0.09c0.03,0.03 0.05,0.05 0.07,0.08l0.16 0.17c0.04,0.04 0.06,0.07 0.11,0.09 0.07,0.03 0.12,0.02 0.18,-0.01 0.01,0 0.03,-0.02 0.04,-0.03 0,0 -0.02,-0.02 -0.02,-0.02l-0.15 -0.17c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03l-0.05 -0.05c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03 0,-0.01 -0.01,-0.02 -0.02,-0.03 -0.03,-0.04 -0.07,-0.07 -0.1,-0.11l-0.05 -0.05c-0.03,-0.03 -0.03,-0.04 -0.06,-0.06 -0.03,-0.03 -0.09,-0.06 -0.16,-0.05 -0.03,0.01 -0.05,0.02 -0.07,0.03 -0.03,0.01 -0.04,0.03 -0.06,0.05 -0.03,0.02 -0.06,0.05 -0.09,0.07 -0.01,0.01 -0.01,0.02 -0.02,0.03 -0.02,0.01 -0.04,0.03 -0.06,0.05 -0.01,0.01 -0.09,0.08 -0.1,0.09 -0.01,0.02 -0.03,0.05 -0.04,0.09 -0.02,0.06 0,0.12 0.03,0.16 0.02,0.03 0.03,0.04 0.05,0.06l0.15 0.17c0.01,0 0.02,0.02 0.03,0.02 0.01,0.01 0.02,0.02 0.02,0.03l0.08 0.08c0.01,0.01 0.02,0.02 0.03,0.03l0.05 0.06c0.01,0.01 0.09,0.11 0.1,0.11z>');logo2 = new fabric.Path('M0.91 1.09c0,0.01 -0.01,0.01 -0.01,0.01 0,0 0,0.01 -0.01,0.01l-0.03 0.03c-0.01,0 -0.02,0.01 -0.02,0.01l-0.1 0.1c0,0 0,0 -0.01,0 -0.01,0.02 -0.03,0.03 -0.04,0.04l-0.03 0.03c-0.01,0.01 -0.02,0.01 -0.02,0.02 -0.01,-0.01 -0.06,-0.07 -0.07,-0.08 -0.03,-0.03 -0.07,-0.08 -0.1,-0.11 -0.01,-0.01 -0.01,-0.02 -0.02,-0.02 0,-0.01 -0.01,-0.01 -0.01,-0.02 -0.03,-0.03 -0.05,-0.05 -0.07,-0.08 -0.03,-0.02 -0.08,-0.09 -0.11,-0.11 -0.07,-0.05 -0.14,-0.05 -0.22,-0.02 -0.01,0.01 -0.03,0.03 -0.04,0.03 0,0.01 0.05,0.07 0.06,0.07l0.07 0.08c0,0 0,0 0.01,0.01 0,0 0.01,0.01 0.01,0.01 0.01,0.01 0.02,0.02 0.02,0.03l0.04 0.04c0.05,0.05 0.1,0.1 0.14,0.16 0,0 0.01,0 0.01,0.01l0.09 0.1c0.01,0.01 0.02,0.02 0.02,0.03 0.01,0.01 0.02,0.01 0.03,0.02 0.04,0.03 0.09,0.06 0.16,0.05 0.05,0 0.09,-0.03 0.13,-0.06 0.02,-0.02 0.04,-0.04 0.07,-0.06l0.07 -0.07c0.02,-0.02 0.13,-0.11 0.13,-0.12 0.01,0 0.01,-0.01 0.02,-0.01 0.06,-0.1 0.05,-0.19 -0.02,-0.27l-0.15 -0.17c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03 0,0 -0.01,-0.01 -0.01,-0.01l-0.09 -0.1c-0.02,-0.02 -0.03,-0.04 -0.05,-0.06 -0.02,-0.02 -0.03,-0.04 -0.05,-0.05 -0.01,-0.02 -0.1,-0.11 -0.1,-0.12 -0.02,0.01 -0.05,0.07 -0.06,0.09 -0.02,0.06 -0.01,0.12 0.02,0.17 0.01,0.03 0.04,0.06 0.06,0.08 0.04,0.04 0.07,0.08 0.1,0.12l0.19 0.2c0.01,0.01 0.02,0.02 0.02,0.02zm-0.35 0.04c0,-0.01 0.01,-0.01 0.02,-0.02 0.04,-0.06 0.06,-0.12 0.04,-0.19 -0.02,-0.07 -0.05,-0.09 -0.09,-0.13l-0.03 -0.04c-0.01,0 -0.01,-0.01 -0.02,-0.02 -0.03,-0.02 -0.06,-0.06 -0.09,-0.09l-0.1 -0.11c-0.01,-0.01 -0.07,-0.07 -0.07,-0.08 0.01,0 0.01,-0.01 0.02,-0.01 0,-0.01 0,-0.01 0.01,-0.01l0.04 -0.04c0.01,-0.01 0.02,-0.02 0.03,-0.03 0.01,0 0.01,-0.01 0.02,-0.01l0.12 -0.11c0,-0.01 0.02,-0.03 0.03,-0.03l0.08 0.09c0.03,0.03 0.05,0.05 0.07,0.08l0.16 0.17c0.04,0.04 0.06,0.07 0.11,0.09 0.07,0.03 0.12,0.02 0.18,-0.01 0.01,0 0.03,-0.02 0.04,-0.03 0,0 -0.02,-0.02 -0.02,-0.02l-0.15 -0.17c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03l-0.05 -0.05c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03 0,-0.01 -0.01,-0.02 -0.02,-0.03 -0.03,-0.04 -0.07,-0.07 -0.1,-0.11l-0.05 -0.05c-0.03,-0.03 -0.03,-0.04 -0.06,-0.06 -0.03,-0.03 -0.09,-0.06 -0.16,-0.05 -0.03,0.01 -0.05,0.02 -0.07,0.03 -0.03,0.01 -0.04,0.03 -0.06,0.05 -0.03,0.02 -0.06,0.05 -0.09,0.07 -0.01,0.01 -0.01,0.02 -0.02,0.03 -0.02,0.01 -0.04,0.03 -0.06,0.05 -0.01,0.01 -0.09,0.08 -0.1,0.09 -0.01,0.02 -0.03,0.05 -0.04,0.09 -0.02,0.06 0,0.12 0.03,0.16 0.02,0.03 0.03,0.04 0.05,0.06l0.15 0.17c0.01,0 0.02,0.02 0.03,0.02 0.01,0.01 0.02,0.02 0.02,0.03l0.08 0.08c0.01,0.01 0.02,0.02 0.03,0.03l0.05 0.06c0.01,0.01 0.09,0.11 0.1,0.11z>');color4 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-51.15 10.61l47.96 0 0 580.66 -544.3 0 0 -3.35 -47.18 0 0 -581.04 543.52 0 0 3.73zm-498.85 580.22l-50 0 0 9.17 50 0 0 -9.17z');color5 = new fabric.Path('M128.97 46.71c-11.63,8.03 -23.19,16.14 -34.75,24.24 -6.19,4.34 -8.31,12.39 -4.47,22.1l25.97 65.63c0.64,1.61 0.6,3.19 0.3,4.58l-13.79 99.56 5.14 -101.58c0.23,-1.79 -0.16,-3.35 -0.8,-4.73l-28.95 -62.29c-2.68,-7.97 -1.76,-15.68 1.59,-22.78 2.4,-5.1 21.18,-19.75 42.82,-37.28 8.05,-6.52 13.7,-11.04 19.17,-14.19l-1.72 4.8c5.66,1.81 12.51,2.89 20.46,3.51 -7.75,1.9 -13.96,6.7 -30.97,18.43zm118.3 -26.74c5.47,3.15 11.13,7.67 19.18,14.19 21.63,17.53 40.41,32.18 42.82,37.28 3.34,7.1 4.26,14.81 1.59,22.78l-28.96 62.29c-0.64,1.38 -1.02,2.94 -0.79,4.73l5.14 101.58 -13.79 -99.56c-0.31,-1.39 -0.34,-2.97 0.3,-4.58l25.97 -65.63c3.84,-9.71 1.71,-17.76 -4.48,-22.1 -11.55,-8.1 -23.12,-16.21 -34.75,-24.24 -18.46,-12.74 -24.2,-17.3 -33,-18.86 3.91,-0.3 7.86,-0.66 11.9,-1.18 4.18,-0.52 7.07,-1.85 10.6,-2.78l-1.73 -3.92z');color6 = new fabric.Path('M139.48 24.77c7.17,2.29 16.23,3.41 27.05,3.91 14.17,0.64 28.67,1.1 43.6,0.19 9.43,-0.57 18.58,-0.97 28.27,-2.2 4.18,-0.52 7.07,-1.85 10.6,-2.78l-4.83 -10.99 -100.4 -0.09 -4.29 11.96zm178.46 70.98l-51.35 105.97c-1.18,2.45 -0.45,5.05 0.05,7.58l20.84 103.94 -8.45 -102.49c-0.35,-4.27 -0.36,-8.54 1.19,-12.74l37.72 -102.26zm-247.4 0l51.34 105.97c1.19,2.45 0.46,5.05 -0.05,7.58l-20.84 103.94 8.46 -102.49c0.35,-4.27 0.35,-8.54 -1.2,-12.74l-37.71 -102.26z'); var cl1='#303A5B'; $('#spncl1').css('background-color', cl1); var cl2='#96989A'; $('#spncl2').css('background-color', cl2); var cl3='#F16136'; $('#spncl3').css('background-color', cl3); canvas.add(color1.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl1 }));canvas.add(color2.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl2 }));canvas.add(color3.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl3 }));canvas.add(logo1.set({ left: 100, top: 100, scaleX: 15, scaleY: 15, flipY: false, strokeWidth: 0.03, stroke: '#191919', fill: '#FFFFFF' }));canvas.add(logo2.set({ left: 0, top: 0, scaleX: 0, scaleY: 0, flipY: false, strokeWidth: 0, stroke: '', fill: '' }));canvast.add(color4.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl1 }));canvast.add(color5.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl2 }));canvast.add(color6.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl3 }));color1.selectable=false;color2.selectable=false;color3.selectable=false;logo1.selectable=false;logo2.selectable=false;color4.selectable=false;color5.selectable=false;color6.selectable=false; var dbplnumber = "12"; var dbteam = "TEAM"; var dbplayer = "PLAYER"; var dbbtag = "btag.svg"; var dbfront3d = "../virtual3d_images/flight_front_68.virtual"; var dbback3d = "../virtual3d_images/flight_back_68.virtual"; var dbtagleft = "275"; var dbtagtop = "425"; var dbtagsize = "35"; fabric.Image.fromURL(dbbtag, function(oImgj) { oImgj.set({left:dbtagleft, top:dbtagtop}); oImgj.scaleToWidth(dbtagsize); canvas.add(oImgj); oImgj.selectable = false; }); /* mask load */ fabric.Image.fromURL(dbfront3d, function(oImgj) { oImgj.set({left:300, top:300}); oImgj.scaleToWidth(600); canvas.add(oImgj); oImgj.selectable = false; }); fabric.Image.fromURL(dbback3d, function(oImgj) { oImgj.set({left:300, top:300}); oImgj.scaleToWidth(600) canvast.add(oImgj); oImgj.selectable = false; }); /* Color Change in SVG */ 237,242 $("#color1").on("click", "li", function (event) { event.preventDefault(); $('#box').prop('checked', true); var col = $(this).children('span').css('background-color'); var newcol = new fabric.Color(col).toHex(); $('#ctitle').html($(this).attr('title')); color1.set('fill', col);color4.set('fill', col); $('#newcolor').css('background-color', newcol); var color1atr = $(this).attr('title'); $('#color1val').val(color1atr); $(this).closest('.panel').children('.panel-heading').children('.picker').css('background-color', col); canvas.renderAll(); canvast.renderAll(); }); 238,243 $("#color2").on("click", "li", function (event) { event.preventDefault(); $('#box').prop('checked', true); var col = $(this).children('span').css('background-color'); var newcol = new fabric.Color(col).toHex(); $('#ctitle').html($(this).attr('title')); color2.set('fill', col);color5.set('fill', col); $('#newcolor').css('background-color', newcol); var color2atr = $(this).attr('title'); $('#color2val').val(color2atr); $(this).closest('.panel').children('.panel-heading').children('.picker').css('background-color', col); canvas.renderAll(); canvast.renderAll(); }); 239,244 $("#color3").on("click", "li", function (event) { event.preventDefault(); $('#box').prop('checked', true); var col = $(this).children('span').css('background-color'); var newcol = new fabric.Color(col).toHex(); $('#ctitle').html($(this).attr('title')); color3.set('fill', col);color6.set('fill', col); $('#newcolor').css('background-color', newcol); var color3atr = $(this).attr('title'); $('#color3val').val(color3atr); $(this).closest('.panel').children('.panel-heading').children('.picker').css('background-color', col); canvas.renderAll(); canvast.renderAll(); }); /*Front Text start*/ /*Front Team text start*/ var teamfrontTControl = document.getElementById('teamfront') function updateControls() { teamfrontTControl.value = teamfront.getText(); } teamfrontTControl.onkeyup = function () { var teamfrontText = document.getElementById('teamfront').value; var nLength = teamfrontText.length; teamfrontText = " "+teamfrontText; $('#teamfrontval').val(teamfrontText); teamfront1.setText(teamfrontText) canvas.renderAll() updateControls() } var dbteamfont = "35"; var dbteamstroke = "1"; var dbteamleft = "195"; var dbteamtop = "130"; var teamfront = $('#teamfront').val(); var nLen = teamfront.length; teamfront = " "+teamfront; teamfront1 = new fabric.Text(teamfront, { fontSize: dbteamfont, left: dbteamleft, top: dbteamtop, fill: $('#front_sold_color').val(), fontFamily: $('#name_ffamily').val(), stroke: $('#front_outline_color').val(), strokeWidth: dbteamstroke }); canvas.add(teamfront1); teamfront1.selectable=true; teamfront1.on('selected', function() { $('#scufontfamily').val(this.get("fontFamily")); }); var dbnm1font = "60"; var dbnm1stroke = "2"; var dbnm1left = "200"; var dbnm1top = "190"; var dbnm1angle = "0"; playernumber3 = new fabric.Text(dbplnumber, { fontSize: dbnm1font, left: dbnm1left, top: dbnm1top, fill: $('#front_sold_color').val(), fontFamily: $('#number_ffamily').val(), stroke: $('#front_outline_color').val(), strokeWidth: dbnm1stroke, angle: dbnm1angle }); var dbnm2font = "50"; var dbnm2stroke = "2"; var dbnm2left = "360"; var dbnm2top = "530"; var dbnm2angle = "12"; playernumber4 = new fabric.Text(dbplnumber, { fontSize: dbnm2font, left: dbnm2left, top: dbnm2top, fill: $('#front_sold_color').val(), fontFamily: $('#number_ffamily').val(), stroke: $('#front_outline_color').val(), strokeWidth: dbnm2stroke, angle: dbnm2angle }); canvas.add(playernumber3);canvas.add(playernumber4);playernumber3.selectable=true; playernumber4.selectable=true; playernumber3.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); playernumber4.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); /*Front Team text end*/ var playernumberTControl = document.getElementById('playernumber') function updateControls() { playernumberTControl.value = playernumber.getText(); } playernumberTControl.onkeyup = function () { var playernumberText = document.getElementById('playernumber').value; var nLength = playernumberText.length; playernumberText = " "+playernumberText; $('#playernumberval').val(playernumberText); playernumber.setText(playernumberText) canvas.renderAll() canvast.renderAll() updateControls() } var dbplayerfont = "30"; var dbplayerstroke = "1"; var dbplayerleft = "190"; var dbplayertop = "90"; var PlayerName = $('#playernumber').val(); var nLen = PlayerName.length; PlayerName = " "+PlayerName; playernumber = new fabric.Text(PlayerName, { fontSize: dbplayerfont, left: dbplayerleft, top: dbplayertop, fontFamily: $('#name_ffamily').val(), fontWeight: 'normal', fill: $('#front_sold_color').val(), stroke: $('#front_outline_color').val(), strokeWidth: dbplayerstroke }); canvast.add(playernumber);playernumber.selectable=true; playernumber.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); /*Front text EnD*/ var playernumber2TControl = document.getElementById('playernumber2') function updateControls() { playernumber2TControl.value = playernumber2.getText(); } playernumber2TControl.onkeyup = function () { var playernumber2Text = document.getElementById('playernumber2').value $('#playernumber2val').val(playernumber2Text); playernumber2.set({text: playernumber2Text}) playernumber3.set({text: playernumber2Text}) playernumber4.set({text: playernumber2Text}) playernumber5.set({text: playernumber2Text}) canvast.renderAll() canvas.renderAll() updateControls() } var dbnm3font = "140"; var dbnm3stroke = "2"; var dbnm3left = "195"; var dbnm3top = "200"; var dbnm3angle = "0"; playernumber5 = new fabric.Text(dbplnumber, { fontSize: dbnm3font, left: dbnm3left, top: dbnm3top, fill: $('#front_sold_color').val(), fontFamily: $('#number_ffamily').val(), stroke: $('#front_outline_color').val(), strokeWidth: dbnm3stroke, angle: dbnm3angle }); canvast.add(playernumber5);playernumber5.selectable=true playernumber5.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); var dbnm4font = "60"; var dbnm4stroke = "2"; var dbnm4left = "220"; var dbnm4top = "520"; var dbnm4angle = "0"; playernumber2 = new fabric.Text(dbplnumber, { fontSize: dbnm4font, left: dbnm4left, top: dbnm4top, fill: $('#front_sold_color').val(), fontFamily: $('#number_ffamily').val(), stroke: $('#front_outline_color').val(), strokeWidth: dbnm4stroke, angle: dbnm4angle }); canvast.add(playernumber2);playernumber2.selectable=true; playernumber2.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); $('#down').click(function(){ $('#down').addClass('tsactive'); $('#straight').removeClass('tsactive'); $('#up').removeClass('tsactive'); canvast.remove(playernumber); PlayerName = $('#playernumber').val(); playernumber = new fabric.CurvedText(PlayerName,{ width: 100, height: 50, left: dbplayerleft, top: dbplayertop, textAlign: 'center', fontFamily: $('#scufontfamily').val(), fontWeight: 'normal', fill: $('#front_sold_color').val(), stroke: $('#front_outline_color').val(), radius: 100, fontSize: dbplayerfont, spacing: 7, reverse: true, angle: -5, }); canvast.add(playernumber); playernumber.selectable=true canvast.renderAll() updateControls(); playernumber.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); }); $('#up').click(function(){ $('#up').addClass('tsactive'); $('#straight').removeClass('tsactive'); $('#down').removeClass('tsactive'); canvast.remove(playernumber); PlayerName = $('#playernumber').val(); playernumber = new fabric.CurvedText(PlayerName,{ width: 100, height: 50, left: dbplayerleft, top: dbplayertop, fontFamily: $('#scufontfamily').val(), fontWeight: 'normal', fill: $('#front_sold_color').val(), stroke: $('#front_outline_color').val(), radius: 100, fontSize: dbplayerfont, spacing: 7, textAlign: 'center', reverse: false, angle: 7, }); canvast.add(playernumber); playernumber.selectable=true canvast.renderAll() updateControls(); playernumber.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); }); $('#straight').click(function(){ $('#straight').addClass('tsactive'); $('#up').removeClass('tsactive'); $('#down').removeClass('tsactive'); canvast.remove(playernumber); PlayerName = $('#playernumber').val(); playernumber = new fabric.Text(PlayerName, { fontSize: dbplayerfont, left: dbplayerleft, top: dbplayertop, fontFamily: $('#scufontfamily').val(), fontWeight: 'normal', fill: $('#front_sold_color').val(), stroke: $('#front_outline_color').val(), }); canvast.add(playernumber); playernumber.selectable=true canvast.renderAll() updateControls(); playernumber.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); }); $('#scufontcolor li').click(function() { var col = $(this).data('color'); $('#front_sold_color').val(col); if($('#showFront').hasClass('active')) { try { var selText = canvas.getActiveObject().getText(); if(isNaN(selText)) { canvas.getActiveObject().setFill(col); canvas.renderAll(); } else{ setNumberFillColor(col) } } catch(err) { } } if($('#showBack').hasClass('active')) { try { var selText = canvast.getActiveObject().getText(); if(isNaN(selText)) { canvast.getActiveObject().setFill(col); canvast.renderAll(); } else{ setNumberFillColor(col) } } catch(err) { } } backtcolor_change(col); }); function setNumberFillColor(col){ canvas.setActiveObject(playernumber3); canvas.getActiveObject().setFill(col); canvas.setActiveObject(playernumber4); canvas.getActiveObject().setFill(col); canvas.renderAll(); canvast.setActiveObject(playernumber2); canvast.getActiveObject().setFill(col); canvast.setActiveObject(playernumber5); canvast.getActiveObject().setFill(col); canvast.renderAll(); } function setNumberStrokeColor(col){ canvas.setActiveObject(playernumber3); canvas.getActiveObject().setStroke(col); canvas.setActiveObject(playernumber4); canvas.getActiveObject().setStroke(col); canvas.renderAll(); canvast.setActiveObject(playernumber2); canvast.getActiveObject().setStroke(col); canvast.setActiveObject(playernumber5); canvast.getActiveObject().setStroke(col); canvast.renderAll(); } function backtcolor_change(selected_color) { $('#scufontcolor li').each(function (indx, ele) { if($(ele).data('color') == selected_color) { $(ele).children('span').addClass('selected'); } else { $(ele).children('span').removeClass('selected'); } }); } $('#scufontocolor li').click(function() { var col = $(this).data('color'); $('#front_outline_color').val(col); if($('#showFront').hasClass('active')) { try { var selText = canvas.getActiveObject().getText(); if(isNaN(selText)) { canvas.getActiveObject().setStroke(col); canvas.renderAll(); } else{ setNumberStrokeColor(col) } } catch(err) { } } if($('#showBack').hasClass('active')) { try { var selText = canvast.getActiveObject().getText(); if(isNaN(selText)) { canvast.getActiveObject().setStroke(col); canvast.renderAll(); } else{ setNumberStrokeColor(col) } } catch(err) { } } backtocolor_change(col); }); function backtocolor_change(selected_color) { $('#scufontocolor li').each(function (indx, ele) { if($(ele).data('color') == selected_color) { $(ele).children('span').addClass('selected'); } else { $(ele).children('span').removeClass('selected'); } }); } function setNumberFontFamily(strFontFamily) { canvas.setActiveObject(playernumber3); canvas.getActiveObject().setFontFamily(strFontFamily); canvas.setActiveObject(playernumber4); canvas.getActiveObject().setFontFamily(strFontFamily); canvas.renderAll(); canvast.setActiveObject(playernumber2); canvast.getActiveObject().setFontFamily(strFontFamily); canvast.setActiveObject(playernumber5); canvast.getActiveObject().setFontFamily(strFontFamily); canvast.renderAll(); } document.getElementById('scufontfamily').onchange = function() { if($('#showFront').hasClass('active')) { try { var selText = canvas.getActiveObject().getText(); if(isNaN(selText)) { canvas.getActiveObject().setFontFamily(this.value); canvas.renderAll(); } else{ setNumberFontFamily(this.value); } } catch(err) { } } if($('#showBack').hasClass('active')) { try { var selText = canvast.getActiveObject().getText(); if(isNaN(selText)) { canvast.getActiveObject().setFontFamily(this.value); canvast.renderAll(); } else{ setNumberFontFamily(this.value); } } catch(err) { } } }; /******************************END***************************/ function hidesuccess() { document.getElementById('logosucess').style.display = "none"; } document.getElementById('frontlogos').onchange = function handleImage(e) { var reader = new FileReader(); reader.onload = function (event) { document.getElementById('logosucess').style.display = "inline"; var imgObj = new Image(); imgObj.src = event.target.result; imgObj.onload = function () { logo = new fabric.Image(imgObj); logo.set({left: 160,top: 80}); logo.scaleToWidth(100); canvas.add(logo); canvas.setActiveObject(logo); logo.selectable=true setTimeout(hidesuccess, 5000); } } reader.readAsDataURL(e.target.files[0]); document.getElementById('frontlogos'); } canvas.renderAll(); document.getElementById('backlogos').onchange = function handleImage(e) { var reader = new FileReader(); reader.onload = function (event) { document.getElementById('logosucess').style.display = "inline"; var imgObj = new Image(); imgObj.src = event.target.result; imgObj.onload = function () { logo = new fabric.Image(imgObj); logo.set({left: 160,top: 80}); logo.scaleToWidth(100); canvast.add(logo); canvast.setActiveObject(logo); logo.selectable=true setTimeout(hidesuccess, 5000); } } reader.readAsDataURL(e.target.files[0]); document.getElementById('backlogos'); } canvast.renderAll(); $(window).load(function(){ setTimeout(function(){ $( "#showFront" ).trigger( "click" ); }, 1500); $('#playernumber2').val(dbplnumber); $('#teamfront').val(dbteam); $('#playernumber').val(dbplayer); $x = $('#name_ffamily').val(); $('#teamfront').css("font-family",$x); $('#playernumber').css("font-family",$x); $y = $('#number_ffamily').val(); $('#playernumber2').css("font-family",$y); /*$('#mme a').css('color', ''); $('#mme').parent().css('border', '');*/ $v = $('#name_ffamily').val(); $('#scufontfamily').css("font-family",$v); var dbnff = $('#name_ffamily').val(); $("#scufontfamily > [value=" + dbnff + "]").attr("selected", "true"); }) $('#scufontfamily').change(function() { $('#teamfront').css("font-family", $(this).val()); $('#playernumber').css("font-family", $(this).val()); $('#scufontfamily').css("font-family", $(this).val()); }); } loadBaseShirts(); canvas.calcOffset();