//set meme sizevar memeSize = 260;var canvas = document.getElementById(‘memecanvas’);ctx = canvas.getContext(‘2d’);// Set the text style to that to which we are accustomedcanvas.width = memeSize;canvas.height = memeSize;// Grab the nodesvar img = document.getElementById(‘start-image’);var topText = document.getElementById(‘top-text’);var bottomText = document.getElementById(‘bottom-text’);// When the image has loaded…img.onload = function() { drawMeme()} topText.addEventListener(‘keydown’, drawMeme)topText.addEventListener(‘keyup’, drawMeme)topText.addEventListener(‘change’, drawMeme)bottomText.addEventListener(‘keydown’, drawMeme)bottomText.addEventListener(‘keyup’, drawMeme)bottomText.addEventListener(‘change’, drawMeme)function drawMeme() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, memeSize, memeSize); ctx.lineWidth = 4; ctx.font = ’20pt sans-serif’; ctx.strokeStyle = ‘black’; ctx.fillStyle = ‘white’; ctx.textAlign = ‘center’; ctx.textBaseline = ‘top’; var text1 = document.getElementById(‘top-text’).value; text1 = text1.toUpperCase(); x = memeSize / 2; y = 0; wrapText(ctx, text1, x, y, 300, 28, false); ctx.textBaseline = ‘bottom’; var text2 = document.getElementById(‘bottom-text’).value; text2 = text2.toUpperCase(); y = memeSize; wrapText(ctx, text2, x, y, 300, 28, true);}function wrapText(context, text, x, y, maxWidth, lineHeight, fromBottom) { // add text to begining if its on the next line but stack if on first line var pushMethod = (fromBottom)?’unshift’:’push’; lineHeight = (fromBottom)? – lineHeight: lineHeight; var lines = ; var y = y; var line = ”; var words = text.split(‘ ‘); for (var index = 0; index < words.length; index++) { var testLine = line + ' ' + wordsindex; var metrics = context.measureText(testLine); var testWidth = metrics.width; //push text to next line if it is too long if (testWidth > maxWidth) { linespushMethod(line); line = wordsindex + ‘ ‘; } else { line = testLine; } } linespushMethod(line); for (var lineIndex in lines) { context.strokeText(lineslineIndex, x, y + lineHeight * lineIndex); context.fillText(lineslineIndex, x, y + lineHeight * lineIndex); }}//Trigger the imageLoader function when a file has been selected var fileInput = document.getElementById(‘fileInput’); fileInput.addEventListener(‘change’, imageLoader, false);function imageLoader() { var reader = new FileReader(); reader.onload = function(event) { img = new Image(); img.onload = function(){ ctx.drawImage(img, 0, 0, memeSize, memeSize); } img.src = reader.result; } reader.readAsDataURL(fileInput.files0);}function handleImageClick(e){ const images = document.getElementsByTagName(‘img’); for(var i=0; i < images.length; i++){ imagesi.classList.remove('clicked'); } e.target.className += ' clicked'; img = e.target; ctx.drawImage(img, 0, 0, memeSize, memeSize);}fetch('../files/images.json') .then(function(response){ return response.json() }) .then(function(data){ data.images.forEach(function(image, index){ var imag = document.createElement("img"); imag.setAttribute('src', image.link); imag.setAttribute('alt', 'image'); imag.addEventListener('click', handleImageClick); var container = document.getElementById('images-container'); container.appendChild(imag); }); });var download = document.getElementById('img-download');download.addEventListener('click', prepareDownload, false); function prepareDownload() { var data = canvas.toDataURL(); download.href = data;}