https://muska-gen.surge.sh/js/scripts.js

1window.addEventListener("load", function(event) {
2  const can = document.getElementById('canvas1');
3  const ctx = can.getContext('2d');
4  const canWidth = ctx.canvas.width = window.innerHeight /4;
5  const canHeight =  ctx.canvas.height = window.innerHeight;
6  const tailHeight = canHeight / 3.5 ;
7  const tailPos = canHeight / 1.4;
8
9  let hasInput = false;
10  let imgUrl = " ";
11  
12  imgObj = new Image();
13  imgObj.onload = function() {
14
15    //piecing it all together
16    function drawBoard() {
17      drawWhiteBg();
18      drawTail();
19      drawName("MCKOY");
20      drawSilhouette();
21    }
22
23    //Add White Background to the graphic
24    function drawWhiteBg() {
25      const context = can.getContext('2d');
26      context.fillStyle = "white";
27      context.fillRect(0, 0, canWidth, canHeight);
28    }
29    //Drawing the red tail to the board
30    function drawTail() {
31      const context = can.getContext('2d');
32      context.fillStyle = "red";
33      context.fillRect(0, tailPos, canWidth, tailHeight);
34    }
35
36    //adding silhouette PNG to the board
37    function drawSilhouette(){
38      const context = can.getContext('2d');
39      context.drawImage(imgObj, 0, canHeight / 2.04, canWidth,canHeight / 3   );
40
41      context.save();
42      context.drawImage(imgObj, 0, canHeight / 2.04, canWidth,canHeight / 3   );
43      context.restore();
44    }
45
46
47
48    //Adding name to the board
49    function drawName(string){
50      const context = can.getContext("2d");
51      const formatString = string.split('');
52      const writeHeight = canHeight - tailHeight ;
53      
54
55
56      let xAxis = canWidth / 1.35;
57      let yAxis = canHeight / 8;
58
59      for (let i = 0; i < formatString.length; i++) {
60        
61        let fontResize = formatString.length + 1;
62        //console.log(fontResize);
63        let fontSize = writeHeight / fontResize;
64
65        //console.log(fontSize);
66        context.font = "800 " + fontSize + "px Graduate" ;
67       
68        //console.log(context.font);
69        context.textAlign = "center";
70        context.shadowColor="gray";
71        context.shadowBlur=2;
72        context.lineJoin = "round";
73        context.lineWidth=8;
74
75        context.strokeStyle = "white";
76        context.strokeText(formatString[i], xAxis, yAxis);
77        context.globalCompositeOperation = "destination-out";
78
79        ctx.globalCompositeOperation = "source-over";
80        context.fillStyle = "gray";
81        context.fillText(formatString[i], xAxis, yAxis);
82
83        yAxis += fontSize;
84
85        //fontSize = writeHeight / formatString.length;
86
87      }
88
89      can.onclick = function(){
90        showEditor();
91        if(hasInput) return;
92        addInput(20,20);
93
94        var selectedInput = null;
95        $(function() {
96            $('input').focus(function() {
97                selectedInput = this;
98            }).blur(function(){
99                selectedInput = null;
100                ctx.clearRect(0, 0, canWidth, canHeight);
101                drawWhiteBg();
102                drawTail();
103                drawName(this.value);
104                drawSilhouette();
105                document.getElementById('middle').removeChild(this);
106                hasInput = false;
107                showEditor();
108            });
109        });
110      }
111
112      function addInput(x, y) {
113        var input = document.createElement('input');
114        input.type = 'text';
115        input.id = "editName";
116        input.placeholder = "your name here";
117
118        input.onkeydown = handleEnter;
119        document.getElementById('middle').appendChild(input);
120        input.focus();
121        hasInput = true;
122
123      }
124
125      function handleEnter(e) {
126        var keyCode = e.keyCode;
127        if (keyCode === 13) {
128            ctx.clearRect(0, 0, canWidth, canHeight);
129            drawWhiteBg();
130            drawTail();
131            drawName(this.value);
132            drawSilhouette();
133            document.getElementById('middle').removeChild(this);
134            hasInput = false;
135            showEditor();
136        }
137      }
138    }
139
140    drawBoard();
141
142    function showEditor() {
143        var editor = document.getElementById("nameeditor");
144        if (editor.style.display === "none") {
145            editor.style.display = "block";
146        } else {
147            editor.style.display = "none";
148        }
149    }
150
151   function showLoader() {
152      var loader = document.getElementById("loading");
153      if (loader.style.display === "none") {
154          loader.style.display = "block";
155      } else {
156          loader.style.display = "none";
157      }
158  }
159
160    $(document).keyup(function(e) {
161         if (e.keyCode == 27) { // escape key maps to keycode `27`
162            showEditor();
163        }
164    });
165
166
167
168
169    $("button#upload").click(function(e) {
170        showLoader();
171      
172        try {
173            var img = can.toDataURL('image/jpeg', 1).split(',')[1];
174
175        } catch(e) {
176            var img = can.toDataURL().split(',')[1];
177        }
178        e.preventDefault();
179        $.ajax({
180          url: 'https://api.imgur.com/3/image',
181          type: 'post',
182          headers: {
183              Authorization: 'Client-ID f1b5ccacd2f48b9'
184          },
185          data: {
186              image: img
187          },
188          dataType: 'json',
189          success: function(response) {
190            if(response.success) {
191                imgUrl = response.data.link;
192                //window.location = response.data.link;
193                //console.log("Success Image has been uploaded and can be found here " + imgUrl);
194                const coverImage = imgUrl;
195                const url = 'http://www.zazzle.com/api/create/at-238092028220728468?rf=238092028220728468&ax=Linkover&pd=186437621024529370&fwd=ProductPage&ed=true&boardgraphic=' + coverImage ;
196                window.location = url;
197            }
198          }
199        });
200    });
201
202    function download_image(i){
203        // Dump the canvas contents to a file.
204        try {
205            var img = can.toDataURL('image/jpeg', 1).split(',')[1];
206
207        } catch(i) {
208            var img = can.toDataURL().split(',')[1];
209        }
210       
211        $.ajax({
212          url: 'https://api.imgur.com/3/image',
213          type: 'post',
214          headers: {
215              Authorization: 'Client-ID f1b5ccacd2f48b9'
216          },
217          data: {
218              image: img
219          },
220          dataType: 'json',
221          success: function(response) {
222            if(response.success) {
223                window.location = response.data.link;
224            }
225          }
226        });
227    }
228
229    $("button#download").click(function(){
230      //console.log('clicked download');
231      download_image();
232    });
233
234  }
235  imgObj.src = '/images/silhouette.png';
236  imgObj.crossOrigin = "Anonymous";
237  $('#wrapper').width($('#canvas1').width());
238
239
240});