A Postapocalyptical Meme Maker<\/title><\/head>\n\n <div class=\"alignleft\">\n <script type=\"text\/javascript\">\n \tamzn_assoc_ad_type = \"banner\";\n \tamzn_assoc_marketplace = \"amazon\";\n \tamzn_assoc_region = \"US\";\n \tamzn_assoc_placement = \"assoc_banner_placement_default\";\n \tamzn_assoc_campaigns = \"musicandentertainmentrot\";\n \tamzn_assoc_banner_type = \"rotating\";\n \tamzn_assoc_p = \"48\";\n \tamzn_assoc_width = \"728\";\n \tamzn_assoc_height = \"90\";\n \tamzn_assoc_tracking_id = \"justacourier-20\";\n \tamzn_assoc_linkid = \"e8e918a61d2127bd6f741a7220736900\";\n <\/script>\n <script src=\"\/\/z-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1\"><\/script>\n <\/div>\n\n<body background=#\"282C34\">\n <link href=\"https:\/\/fonts.googleapis.com\/css?family=Coming+Soon|Lacquer|Roboto|Roboto+Condensed:400,700|Share+Tech+Mono|VT323|Work+Sans&display=swap\" rel=\"stylesheet\">\n\n\n\n\n\n \n \n <div id=\"canvas-container\">\n <canvas id=\"canvas\" tabindex=\"1\" width=\"800\" height=\"900\" style=\"border:1px solid #1aff81\"><\/canvas>\n <\/div>\n\n \n\n\n <div id=\"upandsave\">\n <p class=\"titles0\"> A Postapocalyptical Meme Maker <\/p><br>\n <p>Upload image here:<\/p> <br>\n <input type='file' id=\"fileUpload\" accept=\"image\/*\" style=\"margin-top: 10px; margin-bottom: 10px\">\n <a id=\"lnkDownload\" title=\"Save\"><span class=\"mdi.mdi-download\"> Click here to save image<\/span><\/a>\n <\/div>\n\n <div class=\"tab\">\n <button class=\"tablinks\" onclick=\"openCity(event, 'London')\">Controls<\/button>\n <button class=\"tablinks\" onclick=\"openCity(event, 'Paris')\">Info<\/button>\n <button class=\"tablinks\" onclick=\"openCity(event, 'Spain')\">Privacy<\/button>\n <\/div>\n\n <div id=\"London\" class=\"tabcontent\">\n \n\n <p class=\"titles1\">Select type of text<\/p>\n <Select id=\"selector\">\n <optgroup label=\"Nuclear\/Western\">\n <option value=\"one\">Text Green<\/option>\n <option value=\"one1\">HUD Green<\/option>\n <option value=\"two\">Stat Check Green<\/option>\n <option value=\"three\">Text Yellow<\/option>\n <option value=\"four\">Stat Check Yellow<\/option>\n <option value=\"four1\">Shunned Yellow<\/option>\n <option value=\"Six\">Quest added<\/option>\n <option value=\"seven\">Current quest<\/option>\n <\/optgroup>\n <optgroup label=\"Nuclear 2: Electric boogaloo\">\n <option value=\"Eight\">Green<\/option>\n <option value=\"Eight1\">Yellow<\/option>\n <option value=\"Nine\">Quest updated Green<\/option>\n <option value=\"Nine1\">Quest updated Yellow<\/option>\n <option value=\"Nine2\">Everybody disliked that Green<\/option>\n <option value=\"Nine3\">Everybody that Yellow<\/option>\n <option value=\"Ten\">Discovered Green<\/option>\n <option value=\"Ten1\">Discovered Yellow<\/option>\n <option value=\"Eleven\">XP gain Green<\/option>\n <option value=\"Eleven1\">XP gain Yellow<\/option>\n <option value=\"Twelve\">Enemy<\/option>\n <option value=\"Twelve1\">Ally<\/option>\n <\/optgroup>\n <optgroup label=\"Meme Maker\">\n <option value=\"five\" selected=\"selected\">Meme maker<\/option>\n <option value=\"thirteen\">Meme template1<\/option>\n <option value=\"Fourteen\">Meme template2<\/option>\n <option value=\"Fifteen\">Meme template3<\/option>\n <\/optgroup>\n <\/Select>\n\n \n\n <p class=\"titles1\">Font<\/p>\n <select id=\"fontFamily\" name=\"font-control\">\n \n <optgroup label=\"Webfonts\">\n <option value=\"monofonto\" selected=\"selected\">monofonto N\/W<\/option>\n <option value=\"Fixedsys Excelsior 3.01\">Fixedsys Excelsior N\/W<\/option>\n <option value=\"Open Sans Condensed\">Open Sans Condensed N\/W<\/option>\n <option value=\"Jost*\">Jost* FUTURA TRIBUTE<\/option>\n <option value=\"FreeSans\">FreeSans<\/option>\n <\/optgroup>\n <optgroup label=\"Gfonts\">\n <option value=\"Roboto Condensed\">Roboto Condensed N2EB<\/option>\n <option value=\"Share Tech Mono\">Share Tech Mono N2EB<\/option>\n <option value=\"Roboto\">Roboto<\/option>\n <option value=\"VT323\">VT323<\/option>\n <option value=\"Lacquer\">Lacquer<\/option>\n <option value=\"Coming Soon\">Coming Soon<\/option>\n <\/optgroup>\n <optgroup label=\"System Fonts\" (may not work)>\n <option value=\"impact\">impact<\/option>\n <option value=\"Courier New\">Courier New<\/option>\n <option value=\"Times New Roman\">Times<\/option>\n <option value=\"Comic Sans MS\">Comic Sans MS<\/option>\n <option value=\"Verdana\">Verdana<\/option>\n <option value=\"Arial\" >Arial<\/option>\n <\/optgroup>\n <\/select>\n\n <select id=\"fontSize\" class=\"manage_font_size\">\n <option value=\"22\">Size<\/option>\n <option value=\"10\">10 PX<\/option>\n <option value=\"15\">15 PX<\/option>\n <option value=\"18\">18 PX<\/option>\n <option value=\"20\">20 PX<\/option>\n <option value=\"22\">22 PX<\/option>\n <option value=\"25\">25 PX<\/option>\n <option value=\"30\">30 PX<\/option>\n <option value=\"35\">35 PX<\/option>\n <option value=\"40\">40 PX<\/option>\n <option value=\"45\">45 PX<\/option>\n <option value=\"50\">50 PX<\/option>\n <option value=\"55\">55 PX<\/option>\n <option value=\"60\">60 PX<\/option>\n <option value=\"65\">65 PX<\/option>\n <option value=\"70\">70 PX<\/option>\n <option value=\"75\">75 PX<\/option>\n <option value=\"80\">80 PX<\/option>\n <option value=\"85\">85 PX<\/option>\n <option value=\"90\">90 PX<\/option>\n <div id=\"22\" class=\"options\" style=\"display:none\">Display with “Select” Selected<\/div>\n <\/select><br>\n\n\n <p> Bold <\/p>\n <input type='checkbox' name='fonttype' class=\"text-cmd\" id=\"text-cmd-bold\" >\n <p> Italic <\/p>\n <input type='checkbox' name='fonttype' class=\"text-cmd\" id=\"text-cmd-italic\" >\n <p> Color <\/p>\n <input type='text' id=\"toggle\" class=\"toggle1\" \/>\n <i id='colorPalette'><\/i>\n \n\n <p class=\"titles\">Add editable textbox <\/p>\n\n <a onclick=\"Addtext()\" title=\"Add editable textbox\">\n <div class=\"mdi_mdi-format-text\" id='basic'> Basic<\/div>\n <\/a>\n <a onclick=\"Addtext1()\" title=\"Add editable textbox with text shadow\">\n <div class=\"mdi_mdi-format-text\" id='shadow'> w\/shadow<\/div>\n <\/a>\n <a onclick=\"Addtext2()\" title=\"Add editable textbox with text shadow\">\n <div class=\"mdi_mdi-format-text\" id='shadow1'> wo\/stroke<\/div>\n <\/a>\n <a onclick=\"Addtext3()\" title=\"Add editable textbox with text shadow\">\n <div class=\"mdi_mdi-format-text\"> wo\/stroke&shadow<\/div>\n <\/a>\n\n\n \n\n <p class=\"titles\">Add rectangle <\/p>\n\n <a onclick=\"AddRect()\" title=\"Add green rectangle\">\n <div class=\"mdi_mdi-format-text-green\">Green<\/div>\n <\/a>\n <a onclick=\"AddRect3()\" title=\"Add yellow rectangle\">\n <div class=\"mdi_mdi-format-text-yellow\">Yellow<\/div>\n <\/a>\n <a onclick=\"AddRect4()\" title=\"Add red rectangle\">\n <div class=\"mdi_mdi-format-text\">Red<\/div>\n <\/a>\n <a onclick=\"AddRect5()\" title=\"Add white rectangle\">\n <div class=\"mdi_mdi-format-text-white\">White<\/div>\n <\/a>\n <a onclick=\"AddRect6()\" title=\"Add black rectangle\">\n <div class=\"mdi_mdi-format-text-black\">Black<\/div>\n <\/a>\n \n\n \n\n \n\n <p class=\"titles\">Controls <\/p>\n\n <button id=\"copy\" onclick=\"Copy()\">Copy<\/button>\n <button id=\"paste\" onclick=\"Paste()\">Paste<\/button>\n <input type=\"button\" class=\"mdi_mdi-format-text1\" value=\"undo\" onclick=\"undo()\">\n <input type=\"button\" class=\"mdi_mdi-format-text1\" value=\"redo\" onclick=\"redo()\">\n\n <button id=\"delete\" class=\"btn btn-info\">Delete Object(s)<\/button>\n\n \n\n <p class=\"titles\">grouping controls <\/p>\n\n <button id=\"group\">Group<\/button>\n <button id=\"ungroup\">Ungroup<\/button>\n\n <p class=\"titles\">Zoom controls <\/p>\n <p>All elements<\/p>\n <button id=\"zoomin\">+<\/button>\n <button id=\"zoomout\">–<\/button>\n <p>Canvas<\/p>\n <button id=\"zoomIn\">+<\/button>\n <button id=\"zoomOut\">–<\/button>\n\n \n\n <p class=\"titles\">move object<\/p>\n <button onclick=\"sendSelectedObjectToFront()\">Front<\/button>\n <button onclick=\"sendSelectedObjectFordward()\"> Fordwards<\/button>\n <button onclick=\"sendSelectedObjectBackwards()\"> backwards<\/button>\n <button onclick=\"sendSelectedObjectBack()\">Back<\/button>\n\n \n\n <p class=\"titles\">Random controls<\/p>\n <button id=\"rmvbackground\">remove background<\/button>\n <button id=\"b\">fit canvas to image<\/button>\n\n \n\n <p class=\"titles\">boxes control<\/p>\n <p>Lock x axis<\/p>\n <input type=\"checkbox\" name=\"LockMovementX\" id=\"lockMovementX\" checked=\"\">\n <p>Lock y axis<\/p>\n <input type=\"checkbox\" name=\"LockMovementY\" id=\"lockMovementY\" >\n <p>Centered scaling<\/p>\n <input type=\"checkbox\" id=\"centeredScaling\" checked=\"\">\n\n \n <input type=\"checkbox\" id=\"hasControls\" checked=\"\" style=\"display:none;\">\n <p style=\"display:none;>Visible<\/p>\n <input type=\"checkbox\" id=\"visible\" style=\"display:none; checked=\"\">\n\n <\/div>\n\n\n\n <div id=\"Paris\" class=\"tabcontent\">\n <ol> Instructions\n <li> Load an image by clicking the Upload image button.<\/li>\n <li> Select a “Scene” or a meme template in the tipe of text menu.<\/li>\n <li> Edit the text content (multiple lines).<\/li>\n <li> Move\/rezise elements (text, Name, elements) to best suite your image.<\/li>\n <li> Save the canvas image by clicking the save image link. <\/li>\n <\/ol>\n <ul>Features:\n <li> Relocate\/Rezise more than 2 elements by pressing shift and selecting both.<\/li>\n <li> Pick a diferent color for the text with the color selector.<\/li>\n <li> You can drag & drop images from your computer.<\/li>\n <li> No watermarks.<\/li>\n <\/ul>\n <ul> Controls:\n <li> All elements are movable and rezisable.<\/li>\n <li> Copy & paste elements with the buttons or Ctrl+C and Ctrl+V (Cmd in Macs), this also works between “layers\/scenes”.<\/li>\n <li> Undo & Redo changes with the buttons or Ctrl+Z and Ctrl+Y (Cmd in Macs) it’s glitchy and changes the color of current text to the one selected in the color picker.<\/li>\n <li> <kbd>Alt<\/kbd> + dragging changes the proportionally scale behaivor (Centered\/Corner scaling).<\/li>\n <li> if you press <kbd> shift <\/kbd> once you can toggle the direction of the x\/y Movement Lock.<\/li>\n <li> Pressing shift allows to move elements in a invisible grid.<\/li>\n <\/ul>\n <ul>\n <li>Tips:<\/li>\n <li>The output image size is 1000\/900px, scaling down the uploaded image to fit the canvas with added transparency for empty spaces.<\/li>\n <li>The boxes scale from center, so it’s better to scale from a corner.<\/li>\n <li>For bold or italic select an interactive textbox and then tick the checkbox.<\/li>\n <li>Image rezising is an experimental feature not completly working.<\/li>\n <li>This is 100% a fanmade project implemented with fabric.js.<\/li>\n <\/ul>\n <ul>\n <li>Known bugs:<\/li>\n <li>The Monofonto text editing it’s a bit twitchy (this is caused by how fabricjs handle text loading).<\/li>\n <li>You can only modify one element color at the time, but all elements are capable of switching color.<\/li>\n <li>Image scaling is not 100% exact for small sizes.<\/li>\n <\/ul>\n <\/div>\n\n\n <div id=\"Spain\" class=\"tabcontent\">\n <p>Privacy policy<\/p> <p>Third party vendors may use cookies to serve ads based prior visits to this website.<\/p>\n <p>All images generated are made and saved locally in browser.<\/p>\n \n\n \n <\/div>\n\n\n <iframe style=\"width:120px;height:240px;\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" frameborder=\"0\" src=\"\/\/ws-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=justacourier-20&marketplace=amazon&region=US&placement=B07FDVCM9Q&asins=B07FDVCM9Q&linkId=abb072f275ef5efa70c1d17598f6c1c8&show_border=true&link_opens_in_new_window=true&price_color=ffb642&title_color=19ff81&bg_color=282c34\">\n <\/iframe>\n\n <iframe style=\"width:120px;height:240px;\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" frameborder=\"0\" src=\"\/\/ws-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=justacourier-20&marketplace=amazon&region=US&placement=B07MTQTNVR&asins=B07MTQTNVR&linkId=1502ffa8a56713dca9add49c738cac39&show_border=true&link_opens_in_new_window=true&price_color=ffb642&title_color=19ff81&bg_color=282c34\">\n <\/iframe>\n\n <iframe style=\"width:120px;height:240px;\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" frameborder=\"0\" src=\"\/\/ws-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=justacourier-20&marketplace=amazon&region=US&placement=B07JDTHWD4&asins=B07JDTHWD4&linkId=69f8afb2e7b3927b651227803883f630&show_border=true&link_opens_in_new_window=true&price_color=ffb642&title_color=19ff81&bg_color=282c34\">\n\n <\/iframe><iframe style=\"width:120px;height:240px;\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" frameborder=\"0\" src=\"\/\/ws-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=justacourier-20&marketplace=amazon&region=US&placement=B00136RJ86&asins=B00136RJ86&linkId=a20587880ee1d3c91f4f7cff58bd2ac9&show_border=true&link_opens_in_new_window=true&price_color=ffb642&title_color=19ff81&bg_color=282c34\">\n <\/iframe>\n\n <iframe style=\"width:120px;height:240px;\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" frameborder=\"0\" src=\"\/\/ws-eu.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=GB&source=ac&ref=tf_til&ad_type=product_link&tracking_id=justacourier-21&marketplace=amazon&region=GB&placement=B06XFS5657&asins=B06XFS5657&linkId=ca7e26f78f7af8787ea94c0c286c061b&show_border=true&link_opens_in_new_window=true&price_color=ffb642&title_color=19ff81&bg_color=282c34\">\n <\/iframe>\n\n <iframe style=\"width:120px;height:240px;\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" frameborder=\"0\" src=\"\/\/rcm-na.amazon-adsystem.com\/e\/cm?ref=tf_til&t=justacourie06-20&m=amazon&o=15&p=8&l=as1&IS1=1&asins=B001CTG610&linkId=68e8bbd2df2f0dca15bb35db01686dab&bc1=282c34&lt1=_top&fc1=FFB642&lc1=1aff81&bg1=282c34&f=ifr\">\n <\/iframe>\n\n <div id=\"invisiblebox\" style='display:inline-block;'>\n <p style=\"font-Family: monofonto;\">\u2000<\/p>\n <p style=\"font-Family: FreeSans;\">\u2000<\/p>\n <p style=\"font-Family: Open Sans Condensed;\">\u2000<\/p>\n <p style=\"font-Family: VT323;\">\u2000<\/p>\n <p style=\"font-Family: Coming Soon;\">\u2000<\/p>\n <p style=\"font-Family: Roboto;\">\u2000<\/p>\n <p style=\"font-Family: Lacquer;\">\u2000<\/p>\n <p style=\"font-Family: Fixedsys Excelsior 3.01;\">\u2000<\/p>\n <\/div>\n\n \n\n \n\n\n\n\n<\/body>\n\n<\/html>\n\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.2.4\/jquery.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fabric.js\/3.3.2\/fabric.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/modernizr\/2.8.3\/modernizr.js\"><\/script>\n<script src=\"\/fonts\/fontfaceobserver.js\" type=\"text\/javascript\"><\/script>\n<script src=\"https:\/\/bgrins.github.io\/spectrum\/spectrum.js\"><\/script>\n<link href=\"https:\/\/bgrins.github.io\/spectrum\/spectrum.css\" rel=\"stylesheet\" \/>\n\n<script>\n\n\n \/\/brings canvas\n var canvas = new fabric.Canvas('canvas', {\n preserveObjectStacking: true,\n });\n\n\n\n \/\/image to canvasScale AND origbackground\n var canvas,\n canvasOriginalWidth = 960,\n canvasOriginalHeight = 900,\n canvasWidth = 1000,\n canvasHeight = 1000,\n imgWidth,\n imgHeight,\n bgImage,\n canvasScale = 1,\n photoUrlPortrait = '\/fonts\/bg.jpg';\n\n $(document).ready(function() {\n\n setCanvasZoom();\n setCanvasSize({\n height: canvasHeight,\n width: canvasWidth\n });\n\n setTimeout(function() {\n setCanvasBackgroundImageUrl(photoUrlPortrait, 0, 0, 1)\n }, 50)\n });\n\n function setCanvasSize(canvasSizeObject) {\n canvas.setWidth(canvasSizeObject.width);\n canvas.setHeight(canvasSizeObject.height);\n }\n\n function setCanvasZoom() {\n canvasWidth = canvasOriginalWidth * canvasScale;\n canvasHeight = canvasOriginalHeight * canvasScale;\n\n canvas.setWidth(canvasWidth);\n canvas.setHeight(canvasHeight);\n }\n\n function setCanvasBackgroundImageUrl(url) {\n if (url && url.length > 0) {\n fabric.Image.fromURL(url, function(img) {\n img.crossOrigin = 'anonymous';\n bgImage = img;\n scaleAndPositionImage();\n });\n } else {\n canvas.backgroundImage = 0;\n canvas.setBackgroundImage('', canvas.renderAll.bind(canvas), {\n crossOrigin: 'anonymous'\n });\n canvas.renderAll();\n }\n }\n\n function scaleAndPositionImage() {\n setCanvasZoom();\n\n var canvasAspect = canvasWidth \/ canvasHeight;\n var imgAspect = bgImage.width \/ bgImage.height;\n var left, top, scaleFactor;\n \/\/ replace with \"if (canvasAspect >= imgAspect)\" for zoomed view \/ \"bgImage.width > bgImage.height\" for scaling to canvas height\n if (bgImage.width > bgImage.height) {\n var scaleFactor = canvasWidth \/ bgImage.width;\n left = 0;\n top = -((bgImage.height * scaleFactor) - canvasHeight) \/ 2;\n } else {\n var scaleFactor = canvasHeight \/ bgImage.height;\n top = 0;\n left = -((bgImage.width * scaleFactor) - canvasWidth) \/ 2;\n }\n\n canvas.setBackgroundImage(bgImage, canvas.renderAll.bind(canvas), {\n top: top,\n left: left,\n originX: 'left',\n originY: 'top',\n scaleX: scaleFactor,\n scaleY: scaleFactor,\n crossOrigin: 'anonymous'\n });\n canvas.renderAll();\n\n }\n \/\/End image to canvasScale\n\n\n \/\/-- adds undo\/redo features currently midbroken\/botched\n canvas.counter = 0;\n var newleft = 0;\n\n var state = [];\n var mods = 0;\n canvas.on(\n 'object:modified',\n function() {\n updateModifications(true);\n },\n 'object:added',\n function() {\n updateModifications(true);\n });\n\n function updateModifications(savehistory) {\n if (savehistory === true) {\n myjson = JSON.stringify(canvas);\n state.push(myjson);\n }\n }\n\n\n\n undo = function undo() {\n if (mods < state.length) {\n canvas.clear().renderAll();\n canvas.loadFromJSON(state[state.length - 1 - mods - 1]);\n canvas.renderAll();\n \/\/console.log(\"geladen \" + (state.length-1-mods-1));\n \/\/console.log(\"state \" + state.length);\n mods += 1;\n \/\/console.log(\"mods \" + mods);\n }\n }\n\n redo = function redo() {\n if (mods > 0) {\n canvas.clear().renderAll();\n canvas.loadFromJSON(state[state.length - 1 - mods + 1]);\n canvas.renderAll();\n \/\/console.log(\"geladen \" + (state.length-1-mods+1));\n mods -= 1;\n \/\/console.log(\"state \" + state.length);\n \/\/console.log(\"mods \" + mods);\n }\n }\n \/\/---end off adds undo\/redo features currently midbroken\/botched\n\n \/\/--- controls to object layer position\n\n var selectedObject;\n canvas.on('object:selected', function(event) {\n selectedObject = event.target;\n });\n\n var sendSelectedObjectBack = function() {\n canvas.sendToBack(selectedObject);\n }\n\n var sendSelectedObjectToFront = function() {\n canvas.bringToFront(selectedObject);\n }\n\n var sendSelectedObjectBackwards = function() {\n canvas.sendBackwards(selectedObject);\n }\n\n var sendSelectedObjectFordward = function() {\n canvas.bringForward(selectedObject);\n }\n\n \/\/--- end of controls to object layer position\n\n \/\/Adds font selection\n $('#fontFamily').change(function() {\n var obj = canvas.getActiveObject();\n if (obj) {\n obj.set($(this).attr('id'), $(this).val());\n }\n canvas.renderAll();\n });\n\n \/* Drag and Drop code adapted from http:\/\/www.html5rocks.com\/en\/tutorials\/dnd\/basics\/ *\/\n \/*\n NOTE: the start and end handlers are events for the <img> elements; the rest are bound to the canvas container.\n *\/\n\n function handleDragStart(e) {\n [].forEach.call(images, function(img) {\n img.classList.remove('img_dragging');\n });\n this.classList.add('img_dragging');\n }\n\n function handleDragOver(e) {\n if (e.preventDefault) {\n e.preventDefault(); \/\/ Necessary. Allows us to drop.\n }\n\n e.dataTransfer.dropEffect = 'copy'; \/\/ See the section on the DataTransfer object.\n \/\/ NOTE: comment above refers to the article (see top) -natchiketa\n\n return false;\n }\n\n function handleDragEnter(e) {\n \/\/ this \/ e.target is the current hover target.\n this.classList.add('over');\n }\n\n function handleDragLeave(e) {\n this.classList.remove('over'); \/\/ this \/ e.target is previous target element.\n }\n\n function handleDrop(e) {\n \/\/ this \/ e.target is current target element.\n\n \/*\n if (e.stopPropagation) {\n e.stopPropagation(); \/\/ stops the browser from redirecting.\n }\n *\/\n\n e.stopPropagation(); \/\/ Stops some browsers from redirecting.\n e.preventDefault(); \/\/ Stops some browsers from redirecting.\n\n \/\/ handle desktop images\n if (e.dataTransfer.files.length > 0) {\n\n var files = e.dataTransfer.files;\n for (var i = 0, f; f = files[i]; i++) {\n\n \/\/ Only process image files.\n if (f.type.match('image.*')) {\n \/\/ Read the File objects in this FileList.\n var reader = new FileReader();\n \/\/ listener for the onload event\n reader.onload = function(evt) {\n \/\/ create img element\n var img = document.createElement('img');\n img.src = evt.target.result;\n\n \/\/ put image on canvas\n var newImage = new fabric.Image(img, {\n width: img.width,\n height: img.height,\n \/\/ Set the center of the new object based on the event coordinates relative to the canvas container.\n left: 0,\n top: 0,\n });\n\n canvas.add(newImage);\n\n \/\/ \/\/ Scale background image --not working rn\n \/\/ {\n \/\/ bgImage = img;\n \/\/ scaleAndPositionImage();\n \/\/ };\n \/\/\n \/\/ canvas.setBackgroundImage(0);\n \/\/ canvas.sendToBack(newImage);\n canvas.bringForward(newImage);\n document.querySelector('#b').onclick = () => {\n canvas.setWidth(newImage.getScaledWidth())\n canvas.setHeight(newImage.getScaledHeight())\n img.set({\n left: 0,\n top: 0\n })\n img.setCoords()\n canvas.requestRenderAll()\n }\n };\n\n \/\/ Read in the image file as a data URL.\n reader.readAsDataURL(f);\n }\n }\n }\n\n \/\/ handle browser images\n else {\n var img = document.querySelector('#images img.img_dragging');\n var newImage = new fabric.Image(img, {\n width: img.width,\n height: img.height,\n \/\/ Set the center of the new object based on the event coordinates relative to the canvas container.\n left: 0,\n top: 0,\n });\n\n canvas.add(newImage);\n }\n\n return false;\n }\n\n\n function handleDragEnd(e) {\n \/\/ this\/e.target is the source node.\n [].forEach.call(images, function(img) {\n img.classList.remove('img_dragging');\n });\n }\n\n if (Modernizr.draganddrop) {\n \/\/ Browser supports HTML5 DnD.\n\n \/\/ Bind the event listeners for the image elements\n var images = document.querySelectorAll('#images img');\n [].forEach.call(images, function(img) {\n img.addEventListener('dragstart', handleDragStart, false);\n img.addEventListener('dragend', handleDragEnd, false);\n });\n \/\/ Bind the event listeners for the canvas\n var canvasContainer = document.getElementById('canvas-container');\n canvasContainer.addEventListener('dragenter', handleDragEnter, false);\n canvasContainer.addEventListener('dragover', handleDragOver, false);\n canvasContainer.addEventListener('dragleave', handleDragLeave, false);\n canvasContainer.addEventListener('drop', handleDrop, false);\n } else {\n \/\/ Replace with a fallback to a library solution.\n alert(\"This browser doesn't support the HTML5 Drag and Drop API.\");\n }\n\n \/\/--------------------------------------------------------------------------------------------------------------------------------------------------------------\n\n var inst = this;\n var activeObj = inst.canvas.getActiveObject();\n\n \/\/text controls\n\n radios5 = document.getElementsByName(\"fonttype\"); \/\/ wijzig naar button\n for (var i = 0, max = radios5.length; i < max; i++) {\n radios5[i].onclick = function() {\n\n if (document.getElementById(this.id).checked == true) {\n if (this.id == \"text-cmd-bold\") {\n canvas.getActiveObject().set(\"fontWeight\", \"bold\");\n }\n if (this.id == \"text-cmd-italic\") {\n canvas.getActiveObject().set(\"fontStyle\", \"italic\");\n }\n \/\/ if (this.id == \"text-cmd-underline\") {\n \/\/ canvas.getActiveObject().set(\"textDecoration\", \"underline\");\n \/\/ }\n \/\/ if (this.id == \"text-cmd-linethrough\") {\n \/\/ canvas.getActiveObject().set(\"textDecoration\", \"line-through\");\n \/\/ }\n \/\/ if (this.id == \"text-cmd-overline\") {\n \/\/ canvas.getActiveObject().set(\"textDecoration\", \"overline\");\n \/\/ }\n\n } else {\n if (this.id == \"text-cmd-bold\") {\n canvas.getActiveObject().set(\"fontWeight\", \"\");\n }\n if (this.id == \"text-cmd-italic\") {\n canvas.getActiveObject().set(\"fontStyle\", \"\");\n }\n \/\/ if (this.id == \"text-cmd-underline\") {\n \/\/ canvas.getActiveObject().set(\"textDecoration\", \"\");\n \/\/ }\n \/\/ if (this.id == \"text-cmd-linethrough\") {\n \/\/ canvas.getActiveObject().set(\"textDecoration\", \"\");\n \/\/ }\n \/\/ if (this.id == \"text-cmd-overline\") {\n \/\/ canvas.getActiveObject().set(\"textDecoration\", \"\");\n \/\/ }\n }\n\n canvas.renderAll();\n }\n };\n\n \/\/select-scene function\n var currentSelection = 'one';\n $(function() {\n $('#selector').change(function() {\n currentSelection = $(this).val()\n $('.options').hide();\n $('#' + currentSelection).show();\n canvas.forEachObject(function(obj) {\n obj.visible = (obj.showWith === currentSelection);\n });\n canvas.renderAll();\n });\n });\n \/\/select-scene end\n\n \/\/Delete selected\n var inst = this;\n var activeObj = inst.canvas.getActiveObject();\n\n function deleteObjects() {\n var activeObject = canvas.getActiveObject();\n if (activeObject) {\n \/*\tif (confirm('Are you sure?')) { *\/\n canvas.discardActiveObject();\n canvas.remove(activeObject);\n \/\/ canvas.remove(Circle);\n \/\/ canvas.remove(Rectangle);\n \/\/ canvas.remove(Arrow);\n }\n }\n\n $(\"#delete\").click(function() {\n canvas.isDrawingMode = false;\n deleteObjects();\n });\n\n\n \/\/ Disables movement of text while selecting font and scene\n document.getElementById(\"fontFamily\").addEventListener('keyup', function (e) {\n e.stopPropagation();\n }, false);\n document.getElementById(\"fontFamily\").addEventListener('keydown', function (e) {\n e.stopPropagation();\n }, false);\n\n document.getElementById(\"selector\").addEventListener('keyup', function (e) {\n e.stopPropagation();\n }, false);\n document.getElementById(\"selector\").addEventListener('keydown', function (e) {\n e.stopPropagation();\n }, false);\n\n document.getElementById(\"fontSize\").addEventListener('keyup', function (e) {\n e.stopPropagation();\n }, false);\n document.getElementById(\"fontSize\").addEventListener('keydown', function (e) {\n e.stopPropagation();\n }, false);\n\n \/\/ move keypresses (todo update kyecodes to keypress)\n\nwindow.onkeydown = function(e) {\n switch (e.keyCode) {\n case 38:\n \/* Up arrow *\/\n e.preventDefault();\n if (canvas.getActiveObject()) {\n canvas.getActiveObject().top -= 2;\n canvas.renderAll();\n }\n break;\n case 40:\n \/* Down arrow *\/\n e.preventDefault();\n if (canvas.getActiveObject()) {\n canvas.getActiveObject().top += 2;\n canvas.renderAll();\n }\n break;\n case 37:\n \/* Left arrow *\/\n if (canvas.getActiveObject()) {\n canvas.getActiveObject().left -= 2;\n canvas.renderAll();\n }\n break;\n case 39:\n \/* Right arrow *\/\n if (canvas.getActiveObject()) {\n canvas.getActiveObject().left += 2;\n canvas.renderAll();\n }\n break;\n }\n }\n\n $(document).keydown(function(e) {\n console.log(e.which);\n if (e.which === 89 && e.ctrlKey) {\n redo()\n \/\/ control + y\n \/\/replay(redo, undo, '#undo', this);\n } else if (e.which === 90 && e.ctrlKey) {\n undo()\n \/\/ control + z\n \/\/replay(undo, redo, '#redo', this);\n } else if (e.which === 67 && e.ctrlKey) {\n \/\/ control + c\n Copy();\n } else if (e.which === 86 && e.ctrlKey) {\n \/\/ control + v\n Paste();\n }\n else if (e.which === 16) {\n \/\/ 18 is Alt key\n $('input[name=LockMovementX]').trigger('click'); \/\/ Triggers a click on LockMovementX\n\n $('input[name=LockMovementY]').trigger('click'); \/\/ Triggers a click on LockMovementY\n }\n });\n \/\/ ends move keypresses\n\n\/\/deletes object, and respects editing delete command\n document.onkeyup = function (e) {\n if (e.keyCode == 46) {\n obj = canvas.getActiveObject();\n if (!obj.isEditing) {\n canvas.remove(obj);\n }\n }\n };\n\n\n\n\n \/\/zoom in zoom out canvas\n setCanvasZoom();\n\n $('#zoomIn').click(function() {\n canvasScale *= 1.25;\n scaleAndPositionImage();\n });\n $('#zoomOut').click(function() {\n canvasScale \/= 1.25;\n scaleAndPositionImage();\n });\n\n $('#zoomin').click(function() {\n canvas.setZoom(canvas.getZoom() * 1.1);\n });\n\n $('#zoomout').click(function() {\n canvas.setZoom(canvas.getZoom() \/ 1.1);\n });\n\n $('#rmvbackground').click(function() {\n canvas.setBackgroundImage(0);\n canvas.renderAll();\n });\n\n\n \/\/zoom in zoom out canvas\n\n \/\/-----------------------------------------------------------------\n\n\n \/\/ observe boolean checkbox\n\n function observeBoolean(property) {\n document.getElementById(property).onclick = function() {\n canvas.getActiveObject()[property] = this.checked;\n canvas.renderAll();\n };\n }\n\n\n function observeOptionsList(property) {\n var list = document.querySelectorAll('#' + property +\n ' [type=\"checkbox\"]');\n for (var i = 0, len = list.length; i < len; i++) {\n list[i].onchange = function() {\n canvas.item(0)[property](this.name, this.checked);\n canvas.renderAll();\n };\n };\n }\n\n \/\/\n\n observeBoolean('lockMovementX');\n observeBoolean('lockMovementY');\n observeBoolean('centeredScaling');\n observeBoolean('visible');\n observeBoolean('hasControls');\n observeOptionsList('setControlVisible');\n\n\n \/\/--------\n\n $('.manage_font_size').change(function() {\n var cur_value = $(this).val();\n if (cur_value != '') {\n var activeObj = canvas.getActiveObject();\n \/\/Check that text is selected\n if (activeObj == undefined) {\n alert('Please select a Text');\n return false;\n }\n activeObj.set({\n scaleX: 1,\n scaleY: 1,\n fontSize: cur_value\n });\n canvas.renderAll();\n }\n });\n \/\/--------\n\n \/\/---- Starts grouping\n\n $(\"#group\").on('click', function() {\n\n var activeObj = canvas.getActiveObject();\n var activegroup = activeObj.toGroup();\n var objectsInGroup = activegroup.getObjects();\n activegroup.clone(function(newgroup) {\n canvas.remove(activegroup);\n objectsInGroup.forEach(function(object) {\n canvas.remove(object);\n });\n canvas.add(newgroup);\n });\n });\n $(\"#ungroup\").click(function() {\n var activeObject = canvas.getActiveObject();\n if (activeObject.type == \"group\") {\n var items = activeObject._objects;\n activeObject._restoreObjectsState();\n canvas.remove(activeObject);\n for (var i = 0; i < items.length; i++) {\n canvas.add(items[i]);\n canvas.item(canvas.size() - 1).hasControls = true;\n }\n\n canvas.renderAll();\n }\n });\n\n\n\n \/\/--------- ends grouping\n\n \/\/----------- load fonts\n\n var font = new FontFaceObserver('monofonto', {\n });\n\nfont.load().then(function () {\n console.log('Font is available monofonto');\n fabric.util.clearFabricFontCache(\"monofonto\".toLowerCase()); \/\/botched working for lazyfonts\n \/\/ fabric.util.clearFabricFontCache(''); example for clearing all fonts cache\n}, function () {\n console.log('Font is not available');\n});\nvar font1 = new FontFaceObserver('Share Tech Mono', {\n});\n\nfont1.load().then(function () {\nconsole.log('Font is available Share Tech Mono');\n}, function () {\nconsole.log('Font is not available');\n});\n\nvar font2 = new FontFaceObserver('Fixedsys Excelsior 3.01', {\n});\n\nfont2.load().then(function () {\nconsole.log('Font is available Fixedsys Excelsior 3.01');\n}, function () {\nconsole.log('Font is not available');\n});\n \/\/------------Adds button Rectangles------------------\n\n function AddRect() {\n canvas.add(new fabric.Rect({\n fill: 'rgba(26,255,129, 0.15)',\n left: 170,\n top: 680,\n width: 670,\n height: 30,\n centeredScaling: true,\n strokeUniform: true,\n lockMovementX: true,\n stroke: '#19ff81',\n strokeWidth: 2,\n }));\n }\n\n function AddRect3() {\n canvas.add(new fabric.Rect({\n fill: 'rgba(255,182,66, 0.15)',\n left: 170,\n top: 680,\n width: 670,\n height: 30,\n centeredScaling: true,\n strokeUniform: true,\n lockMovementX: true,\n stroke: 'rgba(255,182,66, 1 )',\n strokeWidth: 2,\n }));\n }\n\n\n function AddRect4() {\n canvas.add(new fabric.Rect({\n fill: 'rgba(250,0,0, 0.15)',\n left: 170,\n top: 680,\n width: 670,\n height: 30,\n centeredScaling: true,\n strokeUniform: true,\n lockMovementX: true,\n stroke: 'rgba(139,0,0, 1 )',\n strokeWidth: 2,\n }));\n }\n\n function AddRect5() {\n canvas.add(new fabric.Rect({\n fill: 'rgba(255,255,255, 1.00)',\n left: 170,\n top: 680,\n width: 670,\n height: 30,\n strokeUniform: true,\n }));\n }\n\n function AddRect6() {\n canvas.add(new fabric.Rect({\n fill: 'rgba(0,0,0, 1.00)',\n left: 170,\n top: 680,\n width: 670,\n height: 30,\n strokeUniform: true,\n }));\n }\n\n function AddRect7() {\n canvas.add(new fabric.Rect({\n fill: 'rgba(0,0,0, 0.45)',\n left: 152,\n top: 590,\n width: 700,\n height: 120,\n centeredScaling: true,\n strokeUniform: true,\n lockMovementX: true,\n rx: 15,\n ry: 15,\n shadow: {\n color: 'rgba(0, 0, 0, 0.99)',\n blur: 20,\n offsetX: 0,\n offsetY: 0,\n }\n }));\n }\n\n function Addtext() {\n canvas.add(new fabric.IText('Basic', {\n left: 150,\n top: 150,\n fontFamily: 'Open Sans Condensed',\n fill: 'rgba(#ff0000, 0.99)',\n stroke: '#000',\n strokeWidth: 1,\n fontSize: 35,\n }));\n }\n\n\n function Addtext1() {\n canvas.add(new fabric.IText('w\/shadow', {\n left: 150,\n top: 150,\n fontFamily: 'Open Sans Condensed',\n fill: 'rgba(#ff0000, 0.99)',\n stroke: '#000',\n fontSize: 35,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n }));\n }\n\n function Addtext2() {\n canvas.add(new fabric.IText('wo\/stroke', {\n left: 150,\n top: 150,\n fontFamily: 'Open Sans Condensed',\n fill: 'rgba(#ff0000, 0.99)',\n fontSize: 35,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n }));\n }\n\n function Addtext3() {\n canvas.add(new fabric.IText('Wo\/stroke&shadow', {\n left: 150,\n top: 150,\n fontFamily: 'Open Sans Condensed',\n fill: 'rgba(#ff0000, 0.99)',\n fontSize: 35,\n }));\n }\n\n var poly = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 40\n }, {\n x: 690,\n y: 40\n }, {\n x: 690,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 155,\n top: 810,\n });\n\n function AddRect1() {\n \/\/ \"add\" upper\/lower green line onto canvas\n canvas.add(poly);\n\n }\n\n var poly2 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: -40\n }, {\n x: 690,\n y: -40\n }, {\n x: 690,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n lockMovementX: true,\n left: 155,\n top: 730,\n\n });\n\n \/\/ vertical linear gradient\n poly2.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n\n function AddRect2() {\n \/\/ \"add\" upper\/lower green line onto canvas\n canvas.add(poly2);\n }\n\n\n \/\/----------------------------------------\n\n \/\/text boxes and rectangle\n\n \/\/ Adds name text1\n canvas.add(new fabric.IText('Hash Brown', {\n\n fontFamily: 'monofonto',\n left: 700,\n top: 160,\n fontSize: 22,\n fill: \"#1aff81\",\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'one',\n visible: currentSelection === 'one',\n }));\n \/\/end text\n\n \/\/ \/\/ create a rectangle object for text1\n \/\/ var rect = new fabric.Rect({\n \/\/ fill: 'rgba(0, 16, 8, 0.45)',\n \/\/ left: 152,\n \/\/ top: 590,\n \/\/ width: 700,\n \/\/ height: 120,\n \/\/ strokeUniform: true,\n \/\/ centeredScaling: true,\n \/\/ lockMovementX: true,\n \/\/ showWith: 'one',\n \/\/ visible: currentSelection === 'one',\n \/\/ stroke: 'rgba(0, 0, 0, 0.10)',\n \/\/ strokeWidth: 0.1,\n \/\/ rx: 15,\n \/\/ ry: 15,\n \/\/ shadow: {\n \/\/ color: 'rgba(0, 0, 0, 1.00)',\n \/\/ blur: 20,\n \/\/ offsetX: 0,\n \/\/ offsetY: 0,\n \/\/ }\n \/\/ });\n \/\/\n \/\/ \/\/ \"add\" rectangle onto canvas\n \/\/ canvas.add(rect);\n \/\/ \/\/End black rect. object.\n\n\n var imgURL = '\/fonts\/textbar.png';\n\n var textbgImg = new Image();\n textbgImg.onload = function(img) {\n var textbg = new fabric.Image(textbgImg, {\n width: 1024,\n height: 256,\n left: 148,\n top: 570,\n scaleX: .70,\n scaleY: .60,\n opacity: 0.80,\n lockMovementX: true,\n showWith: 'one',\n visible: currentSelection === 'one',\n crossOrigin: 'anonymous',\n });\n\n canvas.add(textbg);\n canvas.sendToBack(textbg);\n };\n textbgImg.src = imgURL;\n\n\n \/\/ Adds editable text1\n var textbox = new fabric.IText('Here take a few radiation Chems, as my little way of saying, \\n\"I\\'m sorry I twisted your DNA like a kitten with ball of \\nyarn.\"', {\n fontFamily: 'monofonto',\n \/\/ fontFamily: 'Consolas',\n left: 180,\n top: 600,\n fontSize: 22,\n fill: \"#1aff81\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'one',\n visible: currentSelection === 'one',\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n });\n\n\n canvas.add(textbox)\n\n\n \/\/ _initDimensions()\n \/\/ fabric.IText._forceClearCache; needs reworking\n \/\/ Adds name text for checktest1\n\n\n\n\n\n \/\/HUD green start\n\n \/\/ \"add\" topline HP\n var HPtop = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 40\n }, {\n x: 250,\n y: 40\n },\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 3,\n left: 125,\n top: 795,\n });\n \/\/ \"add\" topline onto canvas\n\n \/\/ vertical linear gradient\n\n HPtop.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n var HPbottom = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: -35\n }, {\n x: 250,\n y: -35\n },\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 3,\n left: 125,\n top: 830,\n\n });\n \/\/ \"add\" bottomline HP\n\n\n \/\/ vertical linear gradient\n HPbottom.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n\n \/\/triangle top HP\n var HPtritop = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 12\n }, {\n x: 10,\n y: 12\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 340,\n top: 815,\n });\n \/\/ \"add\" triangle top onto canvas\n\n\n \/\/triangle bottom HP\n var HPtribottom = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 8,\n y: 8\n }, {\n x: 16,\n y: 0\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 240,\n top: 835,\n });\n \/\/ \"add\" triangle top onto canvas\n\n var groupHP = new fabric.Group([ HPtop, HPbottom, HPtritop, HPtribottom ], {\n lockMovementY: true,\n strokeWidth: 10,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n shadow: {\n color: 'rgba(0, 0, 0, 0.99)',\n blur: 5,\n offsetX: 0,\n offsetY: 0,\n }\n });\n\n canvas.add(groupHP);\n\n var HPbar_01 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 8,\n left: 60,\n top: 810,\n });\n\n var HPbar_02 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 8,\n left: 70,\n top: 810,\n });\n\n var HPbar_03 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 8,\n left: 80,\n top: 810,\n });\n\n var HPbar_04 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 8,\n left: 90,\n top: 810,\n });\n\n var HPbar_05 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 8,\n left: 100,\n top: 810,\n });\n\n var HPbar_06 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 8,\n left: 110,\n top: 810,\n });\n\n HPbar_01.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 0.25: 'rgba(26,255,129, 1.0)',\n 0.5: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n HPbar_02.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 0.25: 'rgba(26,255,129, 1.0)',\n 0.5: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n HPbar_03.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 0.25: 'rgba(26,255,129, 1.0)',\n 0.5: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n HPbar_04.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 0.25: 'rgba(26,255,129, 1.0)',\n 0.5: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n HPbar_05.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 0.25: 'rgba(26,255,129, 1.0)',\n 0.5: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n HPbar_06.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 0.25: 'rgba(26,255,129, 1.0)',\n 0.5: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n var groupHPbars = new fabric.Group([ HPbar_01,HPbar_02,HPbar_03,HPbar_04,HPbar_05,HPbar_06 ], {\n lockMovementY: true,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n left: 135,\n shadow: {\n color: 'rgba(0, 0, 0, 0.99)',\n blur: 5,\n offsetX: 0,\n offsetY: 0,\n }\n });\n\n canvas.add(groupHPbars);\n\n\n var HPcompassmarker = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 15\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 6,\n left: 160,\n top: 840,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n });\n \/\/ \"add\" bottom compass marker\n canvas.add(HPcompassmarker);\n\n \/\/ \"adds\" compass arrow\n var HParrowmarker = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 30\n },{\n x: 10,\n y: 25\n },{\n x: 20,\n y: 30\n },{\n x: 20,\n y: 0\n },{\n x: 10,\n y: -16\n },{\n x: 0,\n y: 0\n },\n\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 1,\n left:160,\n top: 860,\n scaleX: .70,\n scaleY: .70,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n shadow: {\n color: 'rgba(0, 0, 0, 0.99)',\n blur: 5,\n offsetX: 0,\n offsetY: 0,\n }\n });\n \/\/ \"add\" compass arrow\n canvas.add(HParrowmarker);\n\n\n\n var HPcompass_left = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 5\n }, {\n x: 20,\n y: 5\n },{\n x: 20,\n y: 0\n },{\n x: 20,\n y: 5\n },{\n x: 40,\n y: 5\n },{\n x: 40,\n y: 0\n },{\n x: 40,\n y: 5\n },{\n x: 60,\n y: 5\n },{\n x: 60,\n y: 0\n },{\n x: 60,\n y: 5\n },{\n x: 80,\n y: 5\n }\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 3,\n left: 135,\n top: 850,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n shadow: {\n color: 'rgba(0, 0, 0, 0.99)',\n blur: 5,\n offsetX: 0,\n offsetY: 0,\n }\n });\n \/\/ \"add\" compass bar 1\n canvas.add(HPcompass_left);\n\n\n\n var HPcompass_center = new fabric.Polyline([\n {\n x: 0,\n y: 5\n }, {\n x: 20,\n y: 5\n },{\n x: 20,\n y: 0\n },{\n x: 20,\n y: 5\n },{\n x: 40,\n y: 5\n },{\n x: 40,\n y: 0\n },{\n x: 40,\n y: 5\n },{\n x: 60,\n y: 5\n },{\n x: 60,\n y: 0\n },{\n x: 60,\n y: 5\n },{\n x: 80,\n y: 5\n }\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 3,\n left: 235,\n top: 850,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n shadow: {\n color: 'rgba(0, 0, 0, 0.99)',\n blur: 5,\n offsetX: 0,\n offsetY: 0,\n }\n });\n \/\/ \"add\" compass bar 2\n canvas.add(HPcompass_center);\n\n var HPcompass_right = new fabric.Polyline([\n {\n x: 0,\n y: 5\n }, {\n x: 20,\n y: 5\n },{\n x: 20,\n y: 0\n },{\n x: 20,\n y: 5\n },{\n x: 40,\n y: 5\n },{\n x: 40,\n y: 0\n },{\n x: 40,\n y: 5\n },{\n x: 60,\n y: 5\n },{\n x: 60,\n y: 0\n },\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 3,\n left: 320,\n top: 850,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n shadow: {\n color: 'rgba(0, 0, 0, 0.99)',\n blur: 5,\n offsetX: 0,\n offsetY: 0,\n }\n });\n \/\/ \"add\" compass bar 3\n canvas.add(HPcompass_right);\n\n\n\n\n \/\/ Adds editable text HP\n canvas.add(new fabric.IText('HP', {\n fontFamily: 'monofonto',\n left: 140,\n top: 785,\n fontSize: 22,\n fill: \"#1aff81\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementY: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n lineHeight: 1.4,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n }));\n\n \/\/ Adds editable N\n canvas.add(new fabric.IText('N', {\n fontFamily: 'monofonto',\n left: 220,\n top: 845,\n fontSize: 22,\n fill: \"#1aff81\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementY: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n lineHeight: 1.4,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n }));\n\n \/\/ Adds editable text1\n var textbox = new fabric.IText('Haha, Gery!', {\n fontFamily: 'monofonto',\n \/\/ fontFamily: 'Consolas',\n left: 180,\n top: 600,\n fontSize: 22,\n fill: \"#1aff81\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n });\n\n\n canvas.add(textbox)\n\n canvas.add(new fabric.IText('Gery', {\n\n fontFamily: 'monofonto',\n left: 700,\n top: 160,\n fontSize: 22,\n fill: \"#1aff81\",\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'one1',\n visible: currentSelection === 'one1',\n }));\n\n var polyAPbar = new fabric.Polyline([\n {\n x: 0,\n y: 40\n }, {\n x: 250,\n y: 40\n }, {\n x: 250,\n y: 0\n },\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 515,\n top: 795,\n });\n\n \/\/ vertical linear gradient\n polyAPbar.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n \/\/ \"add\" topline on AP\n\n\n var polyAPbarbottom1 = new fabric.Polyline([\n {\n x: 0,\n y: -40\n }, {\n x: 120,\n y: -40\n }, {\n x: 120,\n y: 0\n },\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 515,\n top: 840,\n });\n\n \/\/ vertical linear gradient\n polyAPbarbottom1.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n\n \/\/ \"add\" bottomline 1 on AP bar\n\n\n var polyAPbarbottom2 = new fabric.Polyline([\n {\n x: 0,\n y: -40\n }, {\n x: 120,\n y: -40\n }, {\n x: 120,\n y: 0\n },\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 645,\n top: 840,\n });\n\n \/\/ vertical linear gradient\n polyAPbarbottom2.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n\n \/\/ \"add\" bottomline 2 on AP bar\n\n\n \/\/triangle top\n var polyAptri = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 12\n }, {\n x: -10,\n y: 12\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 540,\n top: 820,\n });\n \/\/ \"add\" triangle top onto canvas\n\n\n var groupAP = new fabric.Group([ polyAPbar ,polyAPbarbottom1,polyAPbarbottom2, polyAptri ], {\n lockMovementY: true,\n left:580,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n shadow: {\n color: 'rgba(0, 0, 0, 0.99)',\n blur: 5,\n offsetX: 0,\n offsetY: 0,\n }\n });\n\n canvas.add(groupAP);\n\n\n var polyAPpoint1 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 8,\n left: 820,\n top: 810,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n });\n \/\/ \"add\" topline onto canvas\n\n canvas.add(polyAPpoint1);\n\n polyAPpoint1.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 0.25: 'rgba(26,255,129, 1.0)',\n 0.5: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n var polyCnd1 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 55,\n y: 0\n },\n ], {\n fill: 'rgba(8, 116, 31, 1.00)',\n stroke: 'rgba(8, 116, 31, 1)',\n lockMovementY: true,\n strokeWidth: 16,\n left: 630,\n top: 855,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n });\n \/\/ \"add\" dark green bar AP\n canvas.add(polyCnd1);\n\n var polyCnd = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 40,\n y: 0\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 16,\n left: 630,\n top: 855,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n });\n \/\/ \"add\" green bar AP\n canvas.add(polyCnd);\n\n\n\n\n \/\/ Adds editable AP\n canvas.add(new fabric.IText('AP', {\n fontFamily: 'monofonto',\n left: 800,\n top: 790,\n fontSize: 22,\n fill: \"#1aff81\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementY: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n lineHeight: 1.4,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n }));\n\n \/\/ Adds condition text\n canvas.add(new fabric.IText('CND', {\n fontFamily: 'monofonto',\n left: 600,\n top: 850,\n fontSize: 22,\n fill: \"#1aff81\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementY: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n lineHeight: 1.4,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n }));\n\n \/\/ Adds ammo counter text\n canvas.add(new fabric.IText('11\/104', {\n fontFamily: 'monofonto',\n left: 760,\n top: 850,\n fontSize: 22,\n fill: \"#1aff81\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementY: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n lineHeight: 1.4,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n }));\n\n \/\/HUD green end\n\n\n\n\n\n\n\n\n canvas.add(new fabric.IText('Hash Brown', {\n\n fontFamily: 'monofonto',\n left: 700,\n top: 160,\n fontSize: 22,\n fill: \"#1aff81\",\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'two',\n visible: currentSelection === 'two',\n }));\n \/\/end text\n\n var textbgImg1 = new Image();\n textbgImg1.onload = function(img) {\n var textbg = new fabric.Image(textbgImg, {\n width: 1024,\n height: 256,\n left: 125,\n top: 560,\n scaleX: .73,\n scaleY: .95,\n opacity: 0.80,\n lockMovementX: true,\n showWith: 'two',\n visible: currentSelection === 'two',\n crossOrigin: 'anonymous',\n });\n\n canvas.add(textbg);\n canvas.sendToBack(textbg);\n };\n\n textbgImg1.src = imgURL;\n\n\n \/\/ create a rectangle3 object for checktest1\n \/\/ var recta = new fabric.Rect({\n \/\/ fill: 'rgba(0, 16, 8, 0.65)',\n \/\/ left: 157,\n \/\/ top: 590,\n \/\/ width: 690,\n \/\/ height: 180,\n \/\/ strokeUniform: true,\n \/\/ centeredScaling: true,\n \/\/ lockMovementX: true,\n \/\/ stroke: 'rgba(255,255,255, 0.50)',\n \/\/ strokeWidth: 0.1,\n \/\/ showWith: 'two',\n \/\/ visible: currentSelection === 'two',\n \/\/ rx:15,\n \/\/ ry:15,\n \/\/ shadow: {\n \/\/ color: 'rgba(0, 0, 0, 0.99)',\n \/\/ blur: 20,\n \/\/ offsetX:0,\n \/\/ offsetY:0,\n \/\/ \/\/ showWith: 'two',\n \/\/ \/\/ visible: currentSelection === 'two'\n \/\/ }\n \/\/ });\n \/\/\n \/\/ canvas.add(recta);\n\n\n \/\/ Adds editable text for checktest\n canvas.add(new fabric.IText('Just do your examination and fix me up please.\\n[Perception] If i listen closely, I can hear my genes\\ncrying.\\n[Charisma] Oh, I feel fine! <cough> Never better! <cough>\\nNo problem at all! <wheeze>.', {\n fontFamily: 'monofonto',\n left: 180,\n top: 600,\n fontSize: 22,\n fill: \"#1aff81\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementX: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'two',\n visible: currentSelection === 'two',\n lineHeight: 1.4\n }));\n\n\n \/\/ \/\/ vertical linear gradient recta\n \/\/ recta.setGradient('fill', {\n \/\/ type: 'linear',\n \/\/ type: 'radial',\n \/\/ r1: 140,\n \/\/ r2: 700,\n \/\/ x1: 345,\n \/\/ y1: 70,\n \/\/ x2: 345,\n \/\/ y2: 70,\n \/\/ colorStops: {\n \/\/ 0: 'rgba(0,0,0, 0.9)',\n \/\/ 1: 'rgba(255,255,255, 0.1)'\n \/\/ }\n \/\/ });\n \/\/ \"add\" bottomline onto canvas\n var poly = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n }, {\n x: 690,\n y: 20\n }, {\n x: 690,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n lockMovementX: true,\n left: 155,\n top: 750,\n showWith: 'two',\n visible: currentSelection === 'two',\n });\n \/\/ \"add\" bottomline onto canvas\n canvas.add(poly);\n\n \/\/ vertical linear gradient\n poly.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 20,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n var poly2 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: -20\n }, {\n x: 690,\n y: -20\n }, {\n x: 690,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 155,\n top: 590,\n showWith: 'two',\n visible: currentSelection === 'two',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(poly2);\n\n \/\/ vertical linear gradient\n poly2.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 20,\n colorStops: {\n 0: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n\n \/\/ \"add\" arrowtop\n var poly3 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 10,\n y: -10\n }, {\n x: 20,\n y: 0\n },\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n left: 146,\n top: 615,\n lockMovementX: true,\n showWith: 'two',\n visible: currentSelection === 'two',\n });\n \/\/ \"add\" arrowtop onto canvas\n canvas.add(poly3);\n\n \/\/ vertical linear gradient\n poly3.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 10,\n colorStops: {\n 0: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n\n \/\/ \"add\" arrowbottom\n var poly4 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 10,\n y: 10\n }, {\n x: 20,\n y: 0\n },\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n left: 146,\n top: 735,\n lockMovementX: true,\n showWith: 'two',\n visible: currentSelection === 'two',\n });\n \/\/ \"add\" arrowbottom onto canvas\n canvas.add(poly4);\n\n \/\/ vertical linear gradient\n poly4.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 10,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n \/\/ end arrowbottom onto canvas\n\n \/\/vertical slider glowline\n var poly5 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 60\n },\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n left: 156,\n top: 625,\n lockMovementX: true,\n showWith: 'two',\n visible: currentSelection === 'two',\n });\n \/\/draws vertical slider glowline\n canvas.add(poly5);\n\n \/\/ vertical linear gradient\n poly5.setGradient('stroke', {\n type: 'linear',\n\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 60,\n colorStops: {\n 0: 'rgba(0,0,0, 0.8)',\n 0.5: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(0,0,0, 0.8)',\n }\n });\n \/\/ends vertical slider glowline\n\n\n \/\/ Adds name text2\n canvas.add(new fabric.IText('Fantastic', {\n\n fontFamily: 'monofonto',\n left: 700,\n top: 160,\n fontSize: 22,\n fill: \"#FFB642\",\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'three',\n visible: currentSelection === 'three',\n }));\n \/\/end text\n\n \/\/ \/\/ create a rectangle object for text2\n \/\/ var rect = new fabric.Rect({\n \/\/ fill: 'rgba(0, 16, 8, 0.45)',\n \/\/ left: 152,\n \/\/ top: 590,\n \/\/ width: 700,\n \/\/ height: 120,\n \/\/ strokeUniform: true,\n \/\/ centeredScaling: true,\n \/\/ lockMovementX: true,\n \/\/ showWith: 'three',\n \/\/ visible: currentSelection === 'three',\n \/\/ stroke: 'rgba(0, 0, 0, 0.10)',\n \/\/ strokeWidth: 0.1,\n \/\/ rx: 15,\n \/\/ ry: 15,\n \/\/ shadow: {\n \/\/ color: 'rgba(0, 0, 0, 0.99)',\n \/\/ blur: 20,\n \/\/ offsetX: 0,\n \/\/ offsetY: 0,\n \/\/ }\n \/\/ });\n \/\/\n \/\/ \/\/ \"add\" rectangle onto canvas\n \/\/ canvas.add(rect);\n \/\/ \/\/End black rect. object.\n\n\n\n \/\/ Adds editable text2\n canvas.add(new fabric.IText('\"They asked me how well I understood theoretical physics.\" I\\n said I had a theoretical degree in physics. They said\\n welcome aboard.', {\n fontFamily: 'monofonto',\n left: 180,\n top: 600,\n fontSize: 22,\n fill: \"#ffb642\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'three',\n visible: currentSelection === 'three',\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n }));\n\n\n var imgURL = '\/fonts\/textbar.png';\n\n var textbgImg2 = new Image();\n textbgImg2.onload = function(img) {\n var textbg = new fabric.Image(textbgImg, {\n width: 1024,\n height: 256,\n left: 150,\n top: 570,\n scaleX: .70,\n scaleY: .60,\n opacity: 0.80,\n lockMovementX: true,\n showWith: 'three',\n visible: currentSelection === 'three',\n crossOrigin: 'anonymous',\n });\n\n canvas.add(textbg);\n canvas.sendToBack(textbg);\n };\n textbgImg2.src = imgURL;\n\n\n \/\/------------ checktest here\n\n\n\n\n \/\/ stat check 2 starts here -----------------------------------------------------------------\n\n \/\/ Adds name text\n canvas.add(new fabric.IText('Fantastic', {\n\n fontFamily: 'monofonto',\n left: 700,\n top: 160,\n fontSize: 22,\n fill: \"#ffb642\",\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'four',\n visible: currentSelection === 'four',\n }));\n \/\/end name text\n\n \/\/ \/\/ create a stat check rectangle\n \/\/ var rectanv = new fabric.Rect({\n \/\/ fill: 'rgba(0, 16, 8, 0.65)',\n \/\/ left: 157,\n \/\/ top: 590,\n \/\/ width: 690,\n \/\/ height: 180,\n \/\/ strokeUniform: true,\n \/\/ centeredScaling: true,\n \/\/ lockMovementX: true,\n \/\/ stroke: 'rgba(255,255,255, 0.50)',\n \/\/ strokeWidth: 0.1,\n \/\/ showWith: 'four',\n \/\/ visible: currentSelection === 'four',\n \/\/ \/\/ rx:15,\n \/\/ \/\/ ry:15,\n \/\/ \/\/ shadow: {\n \/\/ \/\/ color: 'rgba(0, 0, 0, 0.99)',\n \/\/ \/\/ blur: 20,\n \/\/ \/\/ offsetX:0,\n \/\/ \/\/ offsetY:0,\n \/\/ \/\/ \/\/ showWith: 'four',\n \/\/ \/\/ \/\/ visible: currentSelection === 'four'\n \/\/ \/\/ }\n \/\/ });\n \/\/ \/\/\n \/\/ \/\/ adds a stat check rectangle\n \/\/ canvas.add(rectanv);\n \/\/ \/\/ end of stat check rectangle\n\n\n \/\/ Adds editable stat check text\n canvas.add(new fabric.IText('[Speech 25] You pay me a stack of caps right now and I\\'ll\\nforget you have my job.\\nActually I\\'m not here to replace you.\\n[Attack] You won\\'t need to worry about bills where you\\'re \\ngoing.', {\n fontFamily: 'monofonto',\n left: 180,\n top: 600,\n fontSize: 22,\n fill: \"#ffb642\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementX: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'four',\n visible: currentSelection === 'four',\n lineHeight: 1.4\n }));\n \/\/ end of editable stat check text\n\n \/\/ Adds bottomline on canvas\n var polynv = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n }, {\n x: 690,\n y: 20\n }, {\n x: 690,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n lockMovementX: true,\n left: 155,\n top: 750,\n showWith: 'four',\n visible: currentSelection === 'four',\n });\n \/\/ \"add\" bottomline onto canvas\n canvas.add(polynv);\n\n\n \/\/ adds linear gradient to bottomline\n polynv.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 20,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 1: 'rgba(255,182,66, 1.0)'\n }\n });\n \/\/ end of bottomline on canvas\n\n \/\/ \"add\" topline onto canvas\n var poly2nv = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: -20\n }, {\n x: 690,\n y: -20\n }, {\n x: 690,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 155,\n top: 590,\n showWith: 'four',\n visible: currentSelection === 'four',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(poly2nv);\n\n \/\/ vertical linear gradient\n poly2nv.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 20,\n colorStops: {\n 0: 'rgba(255,182,66, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n\n \/\/ \"add\" arrowtop\n var poly3nv = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 10,\n y: -10\n }, {\n x: 20,\n y: 0\n },\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n left: 146,\n top: 615,\n lockMovementX: true,\n showWith: 'four',\n visible: currentSelection === 'four',\n });\n \/\/ \"add\" arrowtop onto canvas\n canvas.add(poly3nv);\n\n \/\/ adds vertical linear gradient to arrowtop\n poly3nv.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 10,\n colorStops: {\n 0: 'rgba(255,182,66, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n \/\/ end of arrowtop\n\n \/\/ \"add\" arrowbottom\n var poly4nv = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 10,\n y: 10\n }, {\n x: 20,\n y: 0\n },\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n left: 146,\n top: 735,\n lockMovementX: true,\n showWith: 'four',\n visible: currentSelection === 'four',\n });\n \/\/ \"add\" arrowbottom onto canvas\n canvas.add(poly4nv);\n\n \/\/ vertical linear gradient arrowbottom\n poly4nv.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 10,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 1: 'rgba(255,182,66, 1.0)'\n }\n });\n \/\/ end arrowbottom onto canvas\n\n \/\/vertical slider glowline\n var poly5nv = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 60\n },\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n left: 156,\n top: 625,\n lockMovementX: true,\n showWith: 'four',\n visible: currentSelection === 'four',\n });\n \/\/draws vertical slider glowline\n canvas.add(poly5nv);\n\n \/\/ vertical linear gradient slider glowline\n poly5nv.setGradient('stroke', {\n type: 'linear',\n\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 60,\n colorStops: {\n 0: 'rgba(0,0,0, 0.8)',\n 0.5: 'rgba(255,182,66, 1.0)',\n 1: 'rgba(0,0,0, 0.8)',\n }\n });\n \/\/ends vertical slider glowline\n\n var textbgImg4 = new Image();\n textbgImg4.onload = function(img) {\n var textbg = new fabric.Image(textbgImg, {\n width: 1024,\n height: 256,\n left: 125,\n top: 560,\n scaleX: .73,\n scaleY: .95,\n opacity: 0.80,\n lockMovementX: true,\n showWith: 'four',\n visible: currentSelection === 'four',\n crossOrigin: 'anonymous',\n });\n\n canvas.add(textbg);\n canvas.sendToBack(textbg);\n };\n textbgImg4.src = imgURL;\n\n\/\/ ends stat check NV\n\n\/\/ starts shunned NV\n\n\n \/\/ stat check 2 starts here -----------------------------------------------------------------\n\n \/\/ Adds name text\n canvas.add(new fabric.IText('Fantastic', {\n\n fontFamily: 'monofonto',\n left: 700,\n top: 160,\n fontSize: 22,\n fill: \"#ffb642\",\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'four1',\n visible: currentSelection === 'four1',\n }));\n \/\/end name text\n\n \/\/ \/\/ create a stat check rectangle\n \/\/ var rectanv = new fabric.Rect({\n \/\/ fill: 'rgba(0, 16, 8, 0.65)',\n \/\/ left: 157,\n \/\/ top: 590,\n \/\/ width: 690,\n \/\/ height: 180,\n \/\/ strokeUniform: true,\n \/\/ centeredScaling: true,\n \/\/ lockMovementX: true,\n \/\/ stroke: 'rgba(255,255,255, 0.50)',\n \/\/ strokeWidth: 0.1,\n \/\/ showWith: 'four',\n \/\/ visible: currentSelection === 'four',\n \/\/ \/\/ rx:15,\n \/\/ \/\/ ry:15,\n \/\/ \/\/ shadow: {\n \/\/ \/\/ color: 'rgba(0, 0, 0, 0.99)',\n \/\/ \/\/ blur: 20,\n \/\/ \/\/ offsetX:0,\n \/\/ \/\/ offsetY:0,\n \/\/ \/\/ \/\/ showWith: 'four',\n \/\/ \/\/ \/\/ visible: currentSelection === 'four'\n \/\/ \/\/ }\n \/\/ });\n \/\/ \/\/\n \/\/ \/\/ adds a stat check rectangle\n \/\/ canvas.add(rectanv);\n \/\/ \/\/ end of stat check rectangle\n\n\n \/\/ Adds editable shunned text1\n canvas.add(new fabric.IText('Shunned\\nYou\\'ve left a poor impression on the\\ncommunity and may be shunned as a\\nresult.', {\n fontFamily: 'monofonto',\n left: 340,\n top: 515,\n fontSize: 20,\n fill: \"#ffb642\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementX: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'four1',\n visible: currentSelection === 'four1',\n lineHeight: 1.4\n }));\n \/\/ end of editable shunned text1\n\n \/\/ Adds editable shunned text2 ok\n canvas.add(new fabric.IText('Caesar\\'s salads', {\n fontFamily: 'monofonto',\n left: 297,\n top: 480,\n fontSize: 18,\n fill: \"#ffb642\",\n centeredScaling: true,\n lockMovementX: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'four1',\n visible: currentSelection === 'four1',\n lineHeight: 1.4\n }));\n \/\/ end of editable shunned text 3 ok\n\n \/\/ Adds editable shunned text3 ok\n canvas.add(new fabric.IText('Ok', {\n fontFamily: 'monofonto',\n left: 490,\n top: 630,\n fontSize: 18,\n fill: \"#ffb642\",\n centeredScaling: true,\n lockMovementX: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'four1',\n visible: currentSelection === 'four1',\n lineHeight: 1.4\n }));\n \/\/ end of editable shunned text 3 ok\n\n \/\/ Adds bottomline on canvas\n var polynv = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n }, {\n x: 490,\n y: 20\n }, {\n x: 490,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n lockMovementX: true,\n left: 255,\n top: 650,\n showWith: 'four1',\n visible: currentSelection === 'four1',\n });\n \/\/ \"add\" bottomline onto canvas\n canvas.add(polynv);\n\n\n \/\/ adds linear gradient to bottomline\n polynv.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 20,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 1: 'rgba(255,182,66, 1.0)'\n }\n });\n \/\/ end of bottomline on canvas\n\n \/\/ Adds topline on canvas\n var polynvtop = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: -20\n }, {\n x: 38,\n y: -20\n }, {\n x: 38,\n y: -20\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n lockMovementX: true,\n left: 255,\n top: 490,\n showWith: 'four1',\n visible: currentSelection === 'four1',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polynvtop);\n\n\n \/\/ adds linear gradient to bottomline\n polynvtop.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 20,\n colorStops: {\n 0: 'rgba(255,182,66, 1.0)',\n 1: 'rgba(0,0,0, 0.4)',\n }\n });\n \/\/ end of bottomline on canvas\n\n \/\/ \"add\" topline onto canvas\n var poly2nv = new fabric.Polyline([{\n x: 0,\n y: -20\n }, {\n x: 0,\n y: -20\n }, {\n x: 310,\n y: -20\n }, {\n x: 310,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 435,\n top: 490,\n showWith: 'four1',\n visible: currentSelection === 'four1',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(poly2nv);\n\n \/\/ vertical linear gradient\n poly2nv.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 20,\n colorStops: {\n 0: 'rgba(255,182,66, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n\n\n var textbgImg4 = new Image();\n textbgImg4.onload = function(img) {\n var textbg = new fabric.Image(textbgImg, {\n width: 1024,\n height: 256,\n left: 237,\n top: 460,\n scaleX: .52,\n scaleY: .95,\n opacity: 0.80,\n lockMovementX: true,\n showWith: 'four1',\n visible: currentSelection === 'four1',\n crossOrigin: 'anonymous',\n });\n\n canvas.add(textbg);\n canvas.sendToBack(textbg);\n };\n textbgImg4.src = imgURL;\n\n\/\/ ends shunned NV\n\n \/\/ meme maker\n\n \/\/ create a rectangle object for text1\n \/\/ var rectmeme = new fabric.Rect({\n \/\/ fill: 'rgba(255, 255, 255, 1.0)',\n \/\/ left: 0,\n \/\/ top: 750,\n \/\/ width: 1000,\n \/\/ height: 150,\n \/\/ strokeUniform: true,\n \/\/ centeredScaling: true,\n \/\/ lockMovementX: true,\n \/\/ showWith: 'five',\n \/\/ visible: currentSelection === 'five',\n \/\/\n \/\/ });\n \/\/ canvas.add(rectmeme);\n \/\/\n \/\/ var rectmeme1 = new fabric.Rect({\n \/\/ fill: 'rgba(255, 255, 255, 1.0)',\n \/\/ left: 500,\n \/\/ top: 75,\n \/\/ width: 1000,\n \/\/ height: 150,\n \/\/ strokeUniform: true,\n \/\/ centeredScaling: true,\n \/\/ lockMovementX: true,\n \/\/ originX: 'center',\n \/\/ originY: 'center',\n \/\/ showWith: 'five',\n \/\/ visible: currentSelection === 'five',\n \/\/\n \/\/ });\n \/\/\n \/\/\n \/\/ canvas.add(rectmeme1);\n\n \/\/ Adds editable text1\n canvas.add(new fabric.IText('Multiple\\n lines\\n Editable \\n Top \\n text', {\n fontFamily: 'impact',\n left: 140,\n top: 20,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'five',\n visible: currentSelection === 'five',\n\n }));\n\n \/\/ Adds editable text1\n canvas.add(new fabric.IText('Multiple\\n lines\\n Editable \\n bottom \\n text', {\n fontFamily: 'impact',\n left: 140,\n top: 750,\n fontWeight: 800,\n fontSize: 28,\n fill: \"#ffffff\",\n centeredScaling: true,\n showWith: 'five',\n align: 'mid',\n textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n visible: currentSelection === 'five',\n visible: currentSelection === 'five',\n }));\n\n \/\/ stat check 2 ends here -------------------------------------------------------------\n\n \/\/----- quest added starts Here\n\n \/\/ Adds quest text1\n canvas.add(new fabric.IText('Quest added', {\n\n fontFamily: 'monofonto',\n left: 115,\n top: 160,\n fontSize: 22,\n fill: \"#1aff81\",\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'Six',\n visible: currentSelection === 'Six',\n }));\n \/\/end text\n\n \/\/ Adds quest text2\n canvas.add(new fabric.IText('GLITCH IN THE SYSTEM', {\n\n fontFamily: 'Open Sans Condensed',\n left: 115,\n top: 200,\n fontSize: 56,\n fill: \"#1aff81\",\n shadow: 'rgba(0,0,0,0.99) 0px 5px 10px',\n showWith: 'Six',\n visible: currentSelection === 'Six',\n }));\n \/\/end text\n\n \/\/---- quest added ends here\n\n\n \/\/------ quest progression starts Here\n\n\n \/\/ Adds quest text1\n canvas.add(new fabric.IText('\u25a0 COMPLETED: Travel to the\\nlighthouse.\\n\u25a1 Find the assassin and stop him.', {\n\n fontFamily: 'monofonto',\n left: 115,\n top: 160,\n fontSize: 22,\n fill: \"#1aff81\",\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'seven',\n visible: currentSelection === 'seven',\n }));\n \/\/end text\n\n \/\/----- quest progression ends Here\n\n \/\/ Adds F04 text green\n canvas.add(new fabric.IText('Another settlement has sent word that they need our help.', {\n fontFamily: 'Roboto Condensed',\n left: 200,\n top: 600,\n fontSize: 22,\n fontWeight: 800,\n fill: \"#FFFFFF\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Adds F04 text\n canvas.add(new fabric.IText('Wild revolutionary cowboy', {\n fontFamily: 'Roboto Condensed',\n left: 410,\n top: 572,\n fontSize: 22,\n fontWeight: 800,\n fill: \"#29fd1d\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n canvas.add(new fabric.IText('HP', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 805,\n fontSize: 28,\n fill: \"#29fd1d\",\n fontWeight: 800,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n\n\n\n var polyF4green = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 155,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#29fd1d',\n lockMovementY: true,\n strokeWidth: 10,\n left: 172,\n top: 810,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4green);\n\n var polyF4red = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: -55,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ff5639',\n lockMovementY: true,\n strokeWidth: 10,\n left: 318,\n top: 810,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4red);\n\n polyF4green.setControlsVisibility({\n tl: false, \/\/ middle top disable\n bl: false, \/\/ midle bottom\n tr: false, \/\/ middle left\n br: false, \/\/ I think you get it\n });\n\n polyF4red.setControlsVisibility({\n tl: false, \/\/ middle top disable\n bl: false, \/\/ midle bottom\n tr: false, \/\/ middle left\n br: false, \/\/ I think you get it\n });\n\n var polyF4lower = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 200,\n y: 0\n }, {\n x: 200,\n y: -10\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#29fd1d',\n lockMovementX: true,\n strokeWidth: 3,\n left: 175,\n top: 810,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4lower);\n\n canvas.add(new fabric.IText('AP', {\n fontFamily: 'Roboto Condensed',\n left: 830,\n top: 805,\n fontSize: 28,\n fill: \"#29fd1d\",\n fontWeight: 800,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n var polyF4lowerAP = new fabric.Polyline([{\n x: 0,\n y: -10\n }, {\n x: 0,\n y: 0\n }, {\n x: 200,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#29fd1d',\n lockMovementX: true,\n strokeWidth: 3,\n left: 625,\n top: 810,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4lowerAP);\n\n var polyF4greenAP = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: -155,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#29fd1d',\n lockMovementY: true,\n strokeWidth: 10,\n left: 666,\n top: 810,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4greenAP);\n\n polyF4greenAP.setControlsVisibility({\n tl: false, \/\/ middle top disable\n bl: false, \/\/ midle bottom\n tr: false, \/\/ middle left\n br: false, \/\/ I think you get it\n });\n\n\n \/\/------------ FO4 text ends here\n\n \/\/ Adds F04 text green\n canvas.add(new fabric.IText('Another settlement has sent word that they need our help.', {\n fontFamily: 'Roboto Condensed',\n left: 200,\n top: 600,\n fontSize: 22,\n fontWeight: 800,\n fill: \"#FFFFFF\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Adds F04 text\n canvas.add(new fabric.IText('Wild revolutionary cowboy', {\n fontFamily: 'Roboto Condensed',\n left: 410,\n top: 572,\n fontSize: 22,\n fontWeight: 800,\n fill: \"#ecd42b\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n canvas.add(new fabric.IText('HP', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 805,\n fontSize: 28,\n fill: \"#ecd42b\",\n fontWeight: 800,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n\n\n\n var polyF4green = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 155,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementY: true,\n strokeWidth: 10,\n left: 172,\n top: 810,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4green);\n\n var polyF4red = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: -55,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ff5639',\n lockMovementY: true,\n strokeWidth: 10,\n left: 318,\n top: 810,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4red);\n\n polyF4green.setControlsVisibility({\n tl: false, \/\/ middle top disable\n bl: false, \/\/ midle bottom\n tr: false, \/\/ middle left\n br: false, \/\/ I think you get it\n });\n\n polyF4red.setControlsVisibility({\n tl: false, \/\/ middle top disable\n bl: false, \/\/ midle bottom\n tr: false, \/\/ middle left\n br: false, \/\/ I think you get it\n });\n\n var polyF4lower = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 200,\n y: 0\n }, {\n x: 200,\n y: -10\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementX: true,\n strokeWidth: 3,\n left: 175,\n top: 810,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4lower);\n\n canvas.add(new fabric.IText('AP', {\n fontFamily: 'Roboto Condensed',\n left: 830,\n top: 805,\n fontSize: 28,\n fill: \"#ecd42b\",\n fontWeight: 800,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n var polyF4lowerAP = new fabric.Polyline([{\n x: 0,\n y: -10\n }, {\n x: 0,\n y: 0\n }, {\n x: 200,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementX: true,\n strokeWidth: 3,\n left: 625,\n top: 810,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4lowerAP);\n\n var polyF4greenAP = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: -155,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementY: true,\n strokeWidth: 10,\n left: 666,\n top: 810,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4greenAP);\n\n polyF4greenAP.setControlsVisibility({\n tl: false, \/\/ middle top disable\n bl: false, \/\/ midle bottom\n tr: false, \/\/ middle left\n br: false, \/\/ I think you get it\n });\n\n\n \/\/------------ FO4 text ends here\n\n \/\/---------------F04 quest update green\n\n \/\/ Adds green rectangle object for text1\n var rectfo4 = new fabric.Rect({\n fill: 'rgba(15,46,22, 0.8)',\n left: 140,\n top: 375,\n width: 360,\n height: 30,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine',\n visible: currentSelection === 'Nine',\n });\n\n \/\/ \"add\" rectangle onto canvas\n canvas.add(rectfo4);\n\n \/\/ Adds green rectangle object for text1\n var rectfo41 = new fabric.Rect({\n fill: 'rgba(15,46,22, 0.8)',\n left: 140,\n top: 343,\n width: 360,\n height: 30,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine',\n visible: currentSelection === 'Nine',\n });\n\n \/\/ \"add\" rectangle onto canvas\n canvas.add(rectfo41);\n\n\n \/\/ Adds F04 text\n canvas.add(new fabric.IText(' Go to Valentin\\'\\s Detective Agency', {\n fontFamily: 'Roboto Condensed',\n left: 150,\n top: 350,\n fontSize: 18,\n fontWeight: 400,\n fill: \"#29fd1d\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine',\n visible: currentSelection === 'Nine',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Adds F04 text\n canvas.add(new fabric.IText('\u2714 Completed: Find information about Shaun', {\n fontFamily: 'Roboto Condensed',\n left: 150,\n top: 380,\n fontSize: 18,\n fontWeight: 400,\n fill: \"#29fd1d\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine',\n visible: currentSelection === 'Nine',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Ends adds quest updated Green\n\n \/\/---------------F04 quest update yellow\n\n \/\/ Adds yellow rectangle object for text1\n var rectfo4 = new fabric.Rect({\n fill: 'rgba(75,71,24, 0.8)',\n left: 140,\n top: 375,\n width: 360,\n height: 30,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine1',\n visible: currentSelection === 'Nine1',\n });\n\n \/\/ \"add\" rectangle onto canvas\n canvas.add(rectfo4);\n\n \/\/ Adds yellow rectangle object for text1\n var rectfo41 = new fabric.Rect({\n fill: 'rgba(75,71,24, 0.8)',\n left: 140,\n top: 343,\n width: 360,\n height: 30,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine1',\n visible: currentSelection === 'Nine1',\n });\n\n \/\/ \"add\" rectangle onto canvas\n canvas.add(rectfo41);\n\n\n \/\/ Adds F04 text\n canvas.add(new fabric.IText(' Go to Valentin\\'\\s Detective Agency', {\n fontFamily: 'Roboto Condensed',\n left: 150,\n top: 350,\n fontSize: 18,\n fontWeight: 400,\n fill: \"#ecd42b\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine1',\n visible: currentSelection === 'Nine1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Adds F04 text\n canvas.add(new fabric.IText('\u2714 Completed: Find information about the sheep', {\n fontFamily: 'Roboto Condensed',\n left: 150,\n top: 380,\n fontSize: 18,\n fontWeight: 400,\n fill: \"#ecd42b\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine1',\n visible: currentSelection === 'Nine1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Ends adds quest updated yellow\n\n \/\/---------------F04 quest update green\n\n \/\/ Adds Everybody disliked that green\n\n \/\/ Adds green rectangle object for text1\n var rectfo4 = new fabric.Rect({\n fill: 'rgba(15,46,22, 0.8)',\n left: 135,\n top: 72,\n width: 200,\n height: 33,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine2',\n visible: currentSelection === 'Nine2',\n });\n\n \/\/ \"add\" rectangle onto canvas\n canvas.add(rectfo4);\n\n\n \/\/ Adds F04 text\n canvas.add(new fabric.IText('Everybody disliked that.', {\n fontFamily: 'Roboto Condensed',\n left: 150,\n top: 80,\n fontSize: 18,\n fontWeight: 400,\n fill: \"#29fd1d\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine2',\n visible: currentSelection === 'Nine2',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n var polyF4likedleft = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: -10,\n y: 0\n }, {\n x: -10,\n y: -30\n },{\n x: 0,\n y: -30\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#29fd1d',\n lockMovementX: true,\n strokeWidth: 2,\n left: 135,\n top: 73,\n showWith: 'Nine2',\n visible: currentSelection === 'Nine2',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4likedleft);\n\n var polyF4likedright = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 10,\n y: 0\n }, {\n x: 10,\n y: -30\n },{\n x: 0,\n y: -30\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#29fd1d',\n lockMovementX: true,\n strokeWidth: 2,\n left: 323,\n top: 73,\n showWith: 'Nine2',\n visible: currentSelection === 'Nine2',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4likedright);\n\n \/\/ Ends adds Everybody disliked that Green\n\n \/\/ Adds Everybody disliked that yellow\n\n \/\/ Adds green rectangle object for text1\n var rectfo4 = new fabric.Rect({\n fill: 'rgba(75,71,24, 0.8)',\n left: 135,\n top: 72,\n width: 200,\n height: 33,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine3',\n visible: currentSelection === 'Nine3',\n });\n\n \/\/ \"add\" rectangle onto canvas\n canvas.add(rectfo4);\n\n\n \/\/ Adds F04 text\n canvas.add(new fabric.IText('Everybody disliked that.', {\n fontFamily: 'Roboto Condensed',\n left: 150,\n top: 80,\n fontSize: 18,\n fontWeight: 400,\n fill: \"#ecd42b\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine3',\n visible: currentSelection === 'Nine3',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n var polyF4likedleft = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: -10,\n y: 0\n }, {\n x: -10,\n y: -30\n },{\n x: 0,\n y: -30\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementX: true,\n strokeWidth: 2,\n left: 135,\n top: 73,\n showWith: 'Nine3',\n visible: currentSelection === 'Nine3',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4likedleft);\n\n var polyF4likedright = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 10,\n y: 0\n }, {\n x: 10,\n y: -30\n },{\n x: 0,\n y: -30\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementX: true,\n strokeWidth: 2,\n left: 323,\n top: 73,\n showWith: 'Nine3',\n visible: currentSelection === 'Nine3',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4likedright);\n\n \/\/ Ends adds Everybody disliked that yellow\n\n \/\/ Adds Location discovered F04 green\n canvas.add(new fabric.IText('Discovered', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 400,\n fontSize: 20,\n fontWeight: 400,\n fill: \"#29fd1d\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Ten',\n visible: currentSelection === 'Ten',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Adds Location text f04 green\n canvas.add(new fabric.IText('BOSTON PUBLIC LIBRARY', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 425,\n fontSize: 44,\n fontWeight: 800,\n fill: \"#29fd1d\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Ten',\n visible: currentSelection === 'Ten',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds Location discovered F04 yellow\n canvas.add(new fabric.IText('Discovered', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 400,\n fontSize: 20,\n fontWeight: 400,\n fill: \"#ecd42b\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Ten1',\n visible: currentSelection === 'Ten1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Adds Location text f04 yellow\n canvas.add(new fabric.IText('BOSTON PUBLIC LIBRARY', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 425,\n fontSize: 44,\n fontWeight: 800,\n fill: \"#ecd42b\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Ten1',\n visible: currentSelection === 'Ten1',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/adds XP text and lines green\n\n var polyF4lowerXP = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 200,\n y: 0\n }, {\n x: 200,\n y: -10\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#29fd1d',\n lockMovementX: true,\n strokeWidth: 3,\n left: 175,\n top: 510,\n showWith: 'Eleven',\n visible: currentSelection === 'Eleven',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4lowerXP);\n\n canvas.add(new fabric.IText('XP', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 505,\n fontSize: 28,\n fill: \"#29fd1d\",\n fontWeight: 800,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eleven',\n visible: currentSelection === 'Eleven',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n var polyF4greenXP = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 155,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#29fd1d',\n lockMovementY: true,\n strokeWidth: 10,\n left: 172,\n top: 510,\n showWith: 'Eleven',\n visible: currentSelection === 'Eleven',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4greenXP);\n\n polyF4greenXP.setControlsVisibility({\n tl: false, \/\/ middle top disable\n bl: false, \/\/ midle bottom\n tr: false, \/\/ middle left\n br: false, \/\/ I think you get it\n });\n\n \/\/ Adds XP amount text\n canvas.add(new fabric.IText('+ 0023', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 476,\n fontSize: 32,\n fontWeight: 400,\n fill: \"#29fd1d\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eleven',\n visible: currentSelection === 'Eleven',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n\n \/\/adds XP text and lines yellow\n\n var polyF4lowerXP = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 200,\n y: 0\n }, {\n x: 200,\n y: -10\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementX: true,\n strokeWidth: 3,\n left: 175,\n top: 510,\n showWith: 'Eleven1',\n visible: currentSelection === 'Eleven1',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4lowerXP);\n\n canvas.add(new fabric.IText('XP', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 505,\n fontSize: 28,\n fill: \"#ecd42b\",\n fontWeight: 800,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eleven1',\n visible: currentSelection === 'Eleven1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n var polyF4greenXP = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 155,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementY: true,\n strokeWidth: 10,\n left: 172,\n top: 510,\n showWith: 'Eleven1',\n visible: currentSelection === 'Eleven1',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4greenXP);\n\n polyF4greenXP.setControlsVisibility({\n tl: false, \/\/ middle top disable\n bl: false, \/\/ midle bottom\n tr: false, \/\/ middle left\n br: false, \/\/ I think you get it\n });\n\n \/\/ Adds XP amount text\n canvas.add(new fabric.IText('+ 0023', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 476,\n fontSize: 32,\n fontWeight: 400,\n fill: \"#ecd42b\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eleven1',\n visible: currentSelection === 'Eleven1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Adds enemy red text\n\n var polyF4redEnemy1 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 100,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'hsl(8, 100%, 30%)',\n lockMovementY: true,\n strokeWidth: 10,\n left: 500,\n top: 80,\n showWith: 'Twelve',\n visible: currentSelection === 'Twelve',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4redEnemy1);\n\n var polyF4lowerEnemy = new fabric.Polyline([{\n x: 0,\n y: -10\n }, {\n x: 0,\n y: 0\n }, {\n x: 250,\n y: 0\n }, {\n x: 250,\n y: -10\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ff5639',\n lockMovementX: true,\n strokeWidth: 2,\n left: 390,\n top: 79,\n showWith: 'Twelve',\n visible: currentSelection === 'Twelve',\n shadow: 'rgba(0,0,0,0.99) 1px 1px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4lowerEnemy);\n\n var polyF4redEnemy = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 155,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ff5639',\n lockMovementY: true,\n strokeWidth: 10,\n left: 385,\n top: 80,\n showWith: 'Twelve',\n visible: currentSelection === 'Twelve',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4redEnemy);\n\n \/\/ Adds Enemy text title text f04\n canvas.add(new fabric.IText('ZOMBIE STALKER', {\n fontFamily: 'Roboto Condensed',\n left: 385,\n top: 53,\n fontSize: 26,\n fontWeight: 800,\n fill: \"#ff5639\",\n centeredScaling: true,\n lockMovementY: true,\n showWith: 'Twelve',\n visible: currentSelection === 'Twelve',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/-- end of red enemy text\n\n \/\/ Adds Ally yellow text\n\n var polyF4Ally1 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 100,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'hsl(55, 100%, 30%)',\n lockMovementY: true,\n strokeWidth: 10,\n left: 500,\n top: 80,\n showWith: 'Twelve1',\n visible: currentSelection === 'Twelve1',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4Ally1);\n\n var polyF4lowerAlly = new fabric.Polyline([{\n x: 0,\n y: -10\n }, {\n x: 0,\n y: 0\n }, {\n x: 250,\n y: 0\n }, {\n x: 250,\n y: -10\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementX: true,\n strokeWidth: 2,\n left: 390,\n top: 79,\n showWith: 'Twelve1',\n visible: currentSelection === 'Twelve1',\n shadow: 'rgba(0,0,0,0.99) 1px 1px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4lowerAlly);\n\n var polyF4Ally = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 155,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementY: true,\n strokeWidth: 10,\n left: 385,\n top: 80,\n showWith: 'Twelve1',\n visible: currentSelection === 'Twelve1',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4Ally);\n\n \/\/ Adds Enemy text title text f04\n canvas.add(new fabric.IText('Caitlyn', {\n fontFamily: 'Roboto Condensed',\n left: 385,\n top: 53,\n fontSize: 26,\n fontWeight: 800,\n fill: \"#ecd42b\",\n centeredScaling: true,\n lockMovementY: true,\n showWith: 'Twelve1',\n visible: currentSelection === 'Twelve1',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/-- end of Ally yellow text\n\n \/\/meme maker 1\n\n \/\/ create a rectangle object for meme maker\n var rect13 = new fabric.Rect({\n fill: 'rgba(255, 255, 255, 1.0)',\n left: 0,\n top: 0,\n width: 1000,\n height: 905,\n strokeUniform: true,\n centeredScaling: true,\n selectable: false,\n showWith: 'thirteen',\n visible: currentSelection === 'thirteen',\n\n });\n canvas.add(rect13);\n\n\n\n \/\/ Adds Enemy text title for meme maker\n canvas.add(new fabric.IText('Top editable text - example: \\n Me doing, something i\\'\\m perfectly capable \\of\\ and have done before \\n but someone decides to watch.', {\n fontFamily: 'impact',\n left: 100,\n top: 30,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n \/\/ textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'thirteen',\n visible: currentSelection === 'thirteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds Enemy text title for meme maker\n canvas.add(new fabric.IText('Drag image from PC to here and delete this text \\n (you may need to drag twice) ', {\n fontFamily: 'impact',\n left: 140,\n top: 520,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'thirteen',\n visible: currentSelection === 'thirteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ meme maker 2\n\n \/\/ create a rectangle object for meme maker\n var rect18 = new fabric.Rect({\n fill: 'rgba(255, 255, 255, 1.0)',\n left: 0,\n top: 0,\n width: 1000,\n height: 905,\n strokeUniform: true,\n centeredScaling: true,\n selectable: false,\n showWith: 'Fourteen',\n visible: currentSelection === 'Fourteen',\n\n });\n canvas.add(rect18);\n\n \/\/ create a rectangle object for meme maker\n var rect19 = new fabric.Rect({\n fill: 'rgba(0, 0, 0, 1)',\n left: 495,\n top: 0,\n width: 10,\n height: 905,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Fourteen',\n visible: currentSelection === 'Fourteen',\n\n });\n canvas.add(rect19);\n\n \/\/ create a rectangle object for meme maker\n var rect20 = new fabric.Rect({\n fill: 'rgba(0, 0, 0, 1)',\n left: 0,\n top: 445,\n width: 1000,\n height: 10,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Fourteen',\n visible: currentSelection === 'Fourteen',\n\n });\n canvas.add(rect20);\n\n \/\/ Adds text 1 for meme maker\n canvas.add(new fabric.IText('Top editable text - example: \\n 1.', {\n fontFamily: 'impact',\n left: 10,\n top: 10,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n \/\/ textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fourteen',\n visible: currentSelection === 'Fourteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds text 2 for meme maker\n canvas.add(new fabric.IText('Top editable text - example: \\n 2.', {\n fontFamily: 'impact',\n left: 520,\n top: 10,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n \/\/ textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fourteen',\n visible: currentSelection === 'Fourteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds text 3 meme maker\n canvas.add(new fabric.IText('Bottom editable text - example: \\n 3.', {\n fontFamily: 'impact',\n left: 10,\n top: 470,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n \/\/ textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fourteen',\n visible: currentSelection === 'Fourteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds text 4 meme maker\n canvas.add(new fabric.IText('Bottom editable text - example: \\n 4.', {\n fontFamily: 'impact',\n left: 520,\n top: 470,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n \/\/ align: 'mid',\n \/\/ textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fourteen',\n visible: currentSelection === 'Fourteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/meme maker 3\n\n \/\/ create a rectangle object for meme maker\n var rect14 = new fabric.Rect({\n fill: 'rgba(255, 255, 255, 1.0)',\n left: 0,\n top: 0,\n width: 1000,\n height: 905,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n lockMovementy: true,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n\n });\n canvas.add(rect14);\n\n \/\/ create a rectangle object for meme maker\n var rect15 = new fabric.Rect({\n fill: 'rgba(0, 0, 0, 1)',\n left: 495,\n top: 0,\n width: 10,\n height: 905,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n\n });\n canvas.add(rect15);\n\n \/\/ create a rectangle object for meme maker\n var rect16 = new fabric.Rect({\n fill: 'rgba(0, 0, 0, 1)',\n left: 0,\n top: 300,\n width: 1000,\n height: 10,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n\n });\n canvas.add(rect16);\n\n \/\/ create a rectangle object for meme maker\n var rect17 = new fabric.Rect({\n fill: 'rgba(0, 0, 0, 1)',\n left: 0,\n top: 600,\n width: 1000,\n height: 10,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n\n });\n canvas.add(rect17);\n\n \/\/ Adds text 1 for meme maker\n canvas.add(new fabric.IText('Top editable text - example: \\n 1.', {\n fontFamily: 'impact',\n left: 10,\n top: 10,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n \/\/ textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds text 2 for meme maker\n canvas.add(new fabric.IText('Top editable text - example: \\n 2.', {\n fontFamily: 'impact',\n left: 520,\n top: 10,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n \/\/ textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds text 3 for meme maker\n canvas.add(new fabric.IText('Editable text - example: \\n 3.', {\n fontFamily: 'impact',\n left: 10,\n top: 320,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds text 4 for meme maker\n canvas.add(new fabric.IText('Editable text - example: \\n 4.', {\n fontFamily: 'impact',\n left: 520,\n top: 320,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds text 5 for meme maker\n canvas.add(new fabric.IText('Editable text - example: \\n 5.', {\n fontFamily: 'impact',\n left: 10,\n top: 620,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds text 6 for meme maker\n canvas.add(new fabric.IText('Editable text - example: \\n 6.', {\n fontFamily: 'impact',\n left: 520,\n top: 620,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n\n \/\/-------------------Adds Text selectable color picker\n\n var selectedColorHex = \"#1aff81\";\n\n $(\"#toggle\").spectrum({\n showPaletteOnly: false,\n showPalette: true,\n showSelectionPalette: false,\n clickoutFiresChange: true,\n \/\/ color: 'black',\n showAlpha: true,\n allowEmpty:true,\n showInitial: true,\n showInput: true,\n hideAfterPaletteSelect: true,\n palette: [\n ['#1aff81'], \/\/green fallout 3\n ['#ffb642'], \/\/yellow new vegas\n ['#2ecfff'], \/\/blue in new vegas\n ['#c0ffff'], \/\/blue in new vegas\n ['#000000'], \/\/black text\n ['#ffffff'], \/\/White text\n ['#29fd1d'], \/\/Green fallout 4\n ['#ecd42b'], \/\/Yellow fallout 4\n ['#ff5639'] \/\/Red fallout 4\n\n ],\n \/\/change text color\n change: function(selectedColor) {\n \/\/$(\"#colorValue\").val(selectedColor);\n selectedColorHex = selectedColor.toRgbString();\n if (canvas.freeDrawingBrush) {\n canvas.freeDrawingBrush.color = selectedColorHex;\n }\n changeSelectionColor(selectedColorHex);\n $(\"#colorPalette\").css(\"color\", selectedColorHex);\n }\n });\n\n\n $(\"#btn-toggle\").click(function() {\n $(\"#toggle\").spectrum(\"toggle\");\n return false;\n });\n\n var changeSelectionColor = function(color) {\n \/\/ check if a single object is selected\n var selectedObject = canvas.getActiveObject();\n if (selectedObject) {\n changeObjectColor(selectedObject, color);\n canvas.renderAll();\n return;\n }\n\n \/\/check if multiple objects are selected\n var selectedGroup = canvas.getActiveGroup();\n if (selectedGroup) {\n for (i = 0; i < selectedGroup._objects.length; i++) {\n changeObjectColor(selectedGroup._objects[i], color);\n }\n canvas.renderAll();\n }\n }\n\n var changeObjectColor = function(object, color) {\n if (object instanceof fabric.IText) {\n object.setColor(color);\n }\n if (object instanceof fabric.Polyline) {\n object.set(\"stroke\", color);\n }\n if (object instanceof fabric.Rect) {\n object.set(\"fill\", color);\n }\n }\n\n canvas.on('object:added', function(e) {\n changeObjectColor(e.target, selectedColorHex);\n });\n\n\n \/\/ Adds background to canvas on click of fileUpload id\n document.getElementById('fileUpload').addEventListener(\"change\", function(e) {\n\n var file = e.target.files[0];\n\n\n\n \/\/ Read the File objects in this FileList.\n var reader = new FileReader();\n \/\/ listener for the onload event\n reader.onload = function(f) {\n \/\/create data element\n var data = f.target.result;\n fabric.Image.fromURL(data, function(img) {\n \/\/ add background image\n {\n bgImage = img;\n scaleAndPositionImage();\n };\n \/\/ put image on canvas\n canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {\n crossOrigin: 'anonymous',\n\n });\n document.querySelector('#b').onclick = () => {\n canvas.setWidth(img.getScaledWidth())\n canvas.setHeight(img.getScaledHeight())\n img.set({\n left: 0,\n top: 0\n })\n img.setCoords()\n canvas.requestRenderAll()\n }\n });\n };\n reader.readAsDataURL(file);\n });\n\n\n\n \/\/\/ saves image background, rect, textC\n var imageSaver = document.getElementById('lnkDownload');\n imageSaver.addEventListener('click', saveImage, false);\n\n function saveImage(e) {\n this.href = canvas.toDataURL({\n format: 'png',\n crossOrigin: 'anonymous',\n quality: 1.0\n });\n this.download = 'custom.png'\n }\n \/\/ends image saving\n\n\n \/\/---------------change layers\n\n \/\/change layer buttons\n \/\/ document.getElementById(\"blb\").onclick = function() {\n \/\/ changeLayer(\"sendToBack\");\n \/\/ };\n \/\/ document.getElementById(\"bld\").onclick = function() {\n \/\/ changeLayer(\"sendBackwards\");\n \/\/ };\n \/\/ document.getElementById(\"blu\").onclick = function() {\n \/\/ changeLayer(\"bringForward\");\n \/\/ };\n \/\/ document.getElementById(\"blt\").onclick = function() {\n \/\/ changeLayer(\"bringToFront\");\n \/\/ };\n\n \/\/ starts copy-paste featuer\n\n\n function Copy() {\n \/\/ clone what are you copying since you\n \/\/ may want copy and paste on different moment.\n \/\/ and you do not want the changes happened\n \/\/ later to reflect on the copy.\n canvas.getActiveObject().clone(function(cloned) {\n _clipboard = cloned;\n });\n }\n\n function Paste() {\n \/\/ clone again, so you can do multiple copies.\n _clipboard.clone(function(clonedObj) {\n canvas.discardActiveObject();\n clonedObj.set({\n left: clonedObj.left + 10,\n top: clonedObj.top + 10,\n evented: true,\n });\n if (clonedObj.type === 'activeSelection') {\n \/\/ active selection needs a reference to the canvas.\n clonedObj.canvas = canvas;\n clonedObj.forEachObject(function(obj) {\n canvas.add(obj);\n });\n \/\/ this should solve the unselectability\n clonedObj.setCoords();\n } else {\n canvas.add(clonedObj);\n }\n _clipboard.top += 10;\n _clipboard.left += 10;\n canvas.setActiveObject(clonedObj);\n canvas.requestRenderAll();\n });\n }\n\n\n \/\/ End of copy-paste feature\n\n \/\/ freaky experimental stuff\n\n \/\/\n \/\/ var canvas = new fabric.Canvas('canvas');\n \/\/ var polygonCount = 1;\n \/\/ var startDrawingPolygon;\n \/\/ var ArrayLength;\n \/\/ var addTexture = false;\n \/\/ var circleCount = 1;\n \/\/ var fillColor = \"rgba(46, 240, 56, 0.5)\";\n \/\/\n \/\/ function done() {\n \/\/ startDrawingPolygon = false;\n \/\/ ArrayLength = circleCount;\n \/\/ circleCount = 1;\n \/\/ var tempCount = 0;\n \/\/ var objects = canvas.getObjects();\n \/\/ var points = [];\n \/\/ for (var i = 0; objects.length > i; i++) {\n \/\/ if (objects[i].polygonNo === polygonCount) {\n \/\/ points.push({\n \/\/ x: objects[i].left,\n \/\/ y: objects[i].top\n \/\/ });\n \/\/ canvas.renderAll();\n \/\/ }\n \/\/ }\n \/\/ console.log(points)\n \/\/ window[\"polygon\" + polygonCount] = new fabric.Polygon(points, {\n \/\/ fill: fillColor,\n \/\/ PolygonNumber: polygonCount,\n \/\/ name: \"Polygon\",\n \/\/ selectable: false,\n \/\/ noofcircles: ArrayLength,\n \/\/ objectCaching: false\n \/\/ });\n \/\/ canvas.add(window[\"polygon\" + polygonCount]);\n \/\/ canvas.sendToBack(window[\"polygon\" + polygonCount])\n \/\/ canvas.renderAll();\n \/\/ polygonCount++;\n \/\/ }\n \/\/\n \/\/ function Addpolygon() {\n \/\/ startDrawingPolygon = true;\n \/\/ }\n \/\/\n \/\/ canvas.on('object:moving', function(option) {\n \/\/ var object = option.target;\n \/\/ canvas.forEachObject(function(obj) {\n \/\/ if (obj.name == \"Polygon\") {\n \/\/ if (obj.PolygonNumber == object.polygonNo) {\n \/\/ var points = window[\"polygon\" + object.polygonNo].get(\"points\");\n \/\/ points[object.circleNo - 1].x = object.left;\n \/\/ points[object.circleNo - 1].y = object.top;\n \/\/ window[\"polygon\" + object.polygonNo].set({\n \/\/ points: points\n \/\/ });\n \/\/ }\n \/\/ }\n \/\/ })\n \/\/ canvas.renderAll();\n \/\/ });\n \/\/\n \/\/ canvas.on('mouse:down', function(option) {\n \/\/\n \/\/ if (option.target && option.target.name == \"draggableCircle\") {\n \/\/ return;\n \/\/ } else {\n \/\/ if (addTexture) {\n \/\/ console.log(option);\n \/\/ }\n \/\/ if (startDrawingPolygon) {\n \/\/ var pointer = canvas.getPointer(option.e);\n \/\/ circle = new fabric.Circle({\n \/\/ left: pointer.x,\n \/\/ top: pointer.y,\n \/\/ radius: 7,\n \/\/ hasBorders: false,\n \/\/ hasControls: false,\n \/\/ polygonNo: polygonCount,\n \/\/ name: \"draggableCircle\",\n \/\/ circleNo: circleCount,\n \/\/ fill: \"rgba(0, 0, 0, 0.5)\",\n \/\/ hasRotatingPoint: false,\n \/\/ originX: 'center',\n \/\/ originY: 'center'\n \/\/ });\n \/\/ canvas.add(circle);\n \/\/ circleCount++;\n \/\/ }\n \/\/ }\n \/\/ });\n \/\/ end of freaky experimental stuff\n\n \/\/\/ tablinks\n function openCity(evt, cityName) {\n var i, tabcontent, tablinks;\n tabcontent = document.getElementsByClassName(\"tabcontent\");\n for (i = 0; i < tabcontent.length; i++) {\n tabcontent[i].style.display = \"none\";\n }\n tablinks = document.getElementsByClassName(\"tablinks\");\n for (i = 0; i < tablinks.length; i++) {\n tablinks[i].className = tablinks[i].className.replace(\" active\", \"\");\n }\n document.getElementById(cityName).style.display = \"block\";\n evt.currentTarget.className += \" active\";\n }\n\n $('button[class=\"tablinks\"]').trigger('click'); \/\/ Triggers a click on LockMovementX\n\n<\/script>\n\n\n<style media=\"screen\">\n\n@font-face {\n font-family: \"monofonto\";\n src: url(\"fonts\/monofonto-webfont.ttf\"),\n url(\"fonts\/monofonto-webfont.woff\"),\n url(\"fonts\/monofonto-webfont.woff2\");\n\n}\n\n@font-face {\n font-family: \"Fixedsys Excelsior 3.01\";\n src:\n url(\"fonts\/FSEX300.ttf\");\n}\n\n@font-face {\n font-family: \"Jost*\";\n src:\n url(\"fonts\/Jost-500-Medium.ttf\");\n}\n\n@font-face {\n font-family: \"FreeSans\";\n src:\n url(\"fonts\/freesans.ttf\");\n}\n\n@font-face {\n font-family: \"Open Sans Condensed\";\n src:\n url(\"fonts\/OpenSansCondensed-Bold.ttf\");\n}\n\n body {\n background: #20262E;\n padding-top: 5px;\n font-family: \"Helvetica\", \"Roboto\";\n line-height: 1;\n }\n\n div {\n \/* background-color:rgb(40, 44, 52); afecta el selector de color *\/\n \/* display: inline-block; *\/\n float: left;\n color: #FFFFFF;\n font-size: 90%;\n background-image: url(\/fonts\/bgnoise.png);\n }\n\n .header {\n width: 728px;\n height: 90px;\n border: 5px solid black;\n position: relative;\n display: inline-block;\n }\n\n\n #canvas-container {\n border: 1px solid black;\n \/* display: block; *\/\n }\n\n #upandsave {\n \/* display: inline-block; *\/\n width: 25%;\n padding: 5px;\n padding-left: 15px;\n padding-right: 10px;\n padding-Top: 5px;\n font-size: 110%;\n background-image: url(\/fonts\/bgmetal.png);\n border: 5px solid black;\n }\n\n #sliders {\n width: 25%;\n \/* background-image: url(\/fonts\/bgnoise.png); *\/\n background-image: url(\/fonts\/bgmetal.png);\n \/* background-size: cover; *\/\n background-color: rgba(198, 193, 190, 0.75);\n padding-top: 10px;\n padding-left: 15px;\n padding-right: 10px;\n padding-bottom: 15px;\n border: 5px solid black;\n }\n\n #London {\n width: 25%;\n \/* background-image: url(\/fonts\/bgnoise.png); *\/\n background-image: url(\/fonts\/bgmetal.png);\n \/* background-size: cover; *\/\n background-color: rgba(198, 193, 190, 0.75);\n padding-top: 0px;\n padding-left: 15px;\n padding-right: 10px;\n padding-bottom: 5px;\n border: 5px solid black;\n }\n\n #London button {\n margin-left: 5px;\n }\n\n #Paris {\n width: 25%;\n \/* background-image: url(\/fonts\/bgnoise.png); *\/\n background-image: url(\/fonts\/bgmetal.png);\n \/* background-size: cover; *\/\n background-color: rgba(198, 193, 190, 0.75);\n padding-top: 10px;\n padding-left: 15px;\n padding-right: 10px;\n padding-bottom: 15px;\n border: 5px solid black;\n }\n\n #Spain {\n width: 25%;\n \/* background-image: url(\/fonts\/bgnoise.png); *\/\n background-image: url(\/fonts\/bgmetal.png);\n \/* background-size: cover; *\/\n background-color: rgba(198, 193, 190, 0.75);\n padding-top: 0px;\n padding-left: 15px;\n padding-right: 10px;\n padding-bottom: 5px;\n border: 5px solid black;\n }\n\n #footer {\n width: 300px;\n height: 250px;\n border: 5px solid black;\n top:85%;\n display: inline-block;\n }\n\n\n #invisiblebox { background-image: url(\"\");\n inline-block;\n }\n\n \/* Style the tab *\/\n .tab {\n display:inline;\n width: 25%;\n padding-top: 1px;\n padding-left: 15px;\n padding-right: 10px;\n padding-bottom: 9px;\n border: 5px solid black;\n \/* position: relative; *\/\n \/* overflow: hidden; *\/\n background-image: url(\/fonts\/bgmetal.png);\n background-color: #f1f1f1;\n }\n\n .mainbox {\n width: 26%;\n display: inline;\n }\n\n \/* Style the buttons inside the tab *\/\n .tab button {\n background-color: inherit;\n float: left;\n outline: none;\n cursor: pointer;\n padding: 5px;\n margin-left: 5px;\n margin-right: 5px;\n margin-bottom: 2px;\n transition: 0.3s;\n font-size: 17px;\n\n }\n\n \/* Change background color of buttons on hover *\/\n .tab button:hover {\n background-color: #ddd;\n }\n\n \/* Create an active\/current tablink class *\/\n .tab button.active {\n background-color: #ccc;\n }\n\n .tablinks {\n padding-left: 5px;\n padding-right: 5px;\n\n }\n\n \/* Style the tab content *\/\n .tabcontent {\n display: none;\n padding: 6px 12px;\n border: 1px solid #ccc;\n border-top: none;\n width: 30%;\n }\n\n \/* input#visible {float: left;} *\/\n\n p,\n ol,\n ul,\n input,\n button,\n select,\n a {\n float: none;\n margin: 0px;\n padding-left: 5px;\n display: inline-block;\n font-family: 'Jost*', \"Futura\", \"Roboto\";\n }\n\n ol,\n ul,\n a,\n button {\n padding-left: 5px;\n }\n\n li {\n margin: 8px;\n }\n\n p {\n\n }\n\n \/* input, *\/\n button,\n .mdi_mdi-format-text {\n display: inline-block;\n font-family: 'Jost*', \"Roboto\";\n font-size: 14px;\n cursor: pointer;\n color: #ffffff;\n font-weight: bold;\n padding: 5px 10px;\n text-decoration: none;\n text-shadow: 0px 1px 0px #263666;\n background-size: cover;\n background-color: rgba(129, 106, 24, 0.9);\n\n border-radius: 1px;\n border: 5px solid black;\n border-image: url(\"\/fonts\/button.png\") 30;\n -webkit-border-radius: 3px;\n \/* makes round corners *\/\n\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(158, 46, 71, 0.8),\n inset -400px 10px 1px 20px rgba(255, 1, 77, 0.9);\n Filter: blur(0.3px);\n\n \/* -webkit-transition: -webkit-box-shadow .05s ease-in-out; *\/\n }\n\n .mdi_mdi-format-text1 {\n display: inline-block;\n font-family: 'Jost*', \"Roboto\";\n font-size: 14px;\n cursor: pointer;\n color: #ffffff;\n font-weight: bold;\n padding: 5px 15px;\n text-decoration: none;\n text-shadow: 0px 1px 0px #263666;\n background-size: cover;\n background-color: rgba(129, 106, 24, 0.9);\n -moz-border-radius: 1px;\n\n border-radius: 1px;\n border: 5px solid black;\n border-image: url(\"\/fonts\/button.png\") 30;\n -webkit-border-radius: 3px;\n \/* makes round corners *\/\n\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(46, 158, 151, 0.8),\n inset -400px 10px 1px 20px rgba(1, 225, 255, 0.9);\n Filter: blur(0.3px);\n\n \/* -webkit-transition: -webkit-box-shadow .05s ease-in-out; *\/\n }\n\n .mdi_mdi-format-text-green {\n display: inline-block;\n font-family: 'Jost*', \"Roboto\";\n font-size: 14px;\n cursor: pointer;\n color: #ffffff;\n font-weight: bold;\n padding: 5px 15px;\n text-decoration: none;\n text-shadow: 0px 1px 0px #263666;\n background-size: cover;\n background-color: rgba(129, 106, 24, 0.9);\n -moz-border-radius: 1px;\n\n border-radius: 1px;\n border: 5px solid black;\n border-image: url(\"\/fonts\/button.png\") 30;\n -webkit-border-radius: 3px;\n \/* makes round corners *\/\n\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(58, 158, 46, 0.8),\n inset -400px 10px 1px 20px rgba(1, 255, 42, 0.9);\n Filter: blur(0.3px);\n}\n .mdi_mdi-format-text-yellow {\n display: inline-block;\n font-family: 'Jost*', \"Roboto\";\n font-size: 14px;\n cursor: pointer;\n color: #ffffff;\n font-weight: bold;\n padding: 5px 15px;\n text-decoration: none;\n text-shadow: 0px 1px 0px #263666;\n background-size: cover;\n background-color: rgba(129, 106, 24, 0.9);\n -moz-border-radius: 1px;\n\n border-radius: 1px;\n border: 5px solid black;\n border-image: url(\"\/fonts\/button.png\") 30;\n -webkit-border-radius: 3px;\n \/* makes round corners *\/\n\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(158, 150, 46, 0.8),\n inset -400px 10px 1px 20px rgba(235, 255, 1, 0.9);\n Filter: blur(0.3px);\n \/* -webkit-transition: -webkit-box-shadow .05s ease-in-out; *\/\n }\n\n .mdi_mdi-format-text-white {\n display: inline-block;\n font-family: 'Jost*', \"Roboto\";\n font-size: 14px;\n cursor: pointer;\n color: #ffffff;\n font-weight: bold;\n padding: 5px 15px;\n text-decoration: none;\n text-shadow: 0px 1px 0px #263666;\n background-size: cover;\n background-color: rgba(129, 106, 24, 0.9);\n -moz-border-radius: 1px;\n\n border-radius: 1px;\n border: 5px solid black;\n border-image: url(\"\/fonts\/button.png\") 30;\n -webkit-border-radius: 3px;\n \/* makes round corners *\/\n\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(181, 179, 154, 0.8),\n inset -400px 10px 1px 20px rgba(254, 249, 183, 0.9);\n Filter: blur(0.3px);\n \/* -webkit-transition: -webkit-box-shadow .05s ease-in-out; *\/\n}\n\n.mdi_mdi-format-text-black {\n display: inline-block;\n font-family: 'Jost*', \"Roboto\";\n font-size: 14px;\n cursor: pointer;\n color: #ffffff;\n font-weight: bold;\n padding: 5px 15px;\n text-decoration: none;\n text-shadow: 0px 1px 0px #263666;\n background-size: cover;\n background-color: rgba(129, 106, 24, 0.9);\n -moz-border-radius: 1px;\n\n border-radius: 1px;\n border: 5px solid black;\n border-image: url(\"\/fonts\/button.png\") 30;\n -webkit-border-radius: 3px;\n \/* makes round corners *\/\n\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(115, 113, 98, 0.8),\n inset -400px 10px 1px 20px rgba(50, 49, 38, 0.9);\n Filter: blur(0.3px);\n\/* -webkit-transition: -webkit-box-shadow .05s ease-in-out; *\/\n}\n\n button:hover,\n input:hover,\n .mdi_mdi-format-text:hover,\n .mdi_mdi-format-text-green:hover,\n .mdi_mdi-format-text-yellow:hover,\n .mdi_mdi-format-text-white:hover,\n .mdi_mdi-format-text-black:hover {\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(158, 150, 46, 0.8),\n inset -400px 10px 1px 20px rgba(255, 146, 1, 0.9);\n }\n\n button:active,\n \/* input:active, *\/\n .mdi_mdi-format-text:active,\n .mdi_mdi-format-text1:active {\n position: relative;\n \/* top: 1px; *\/\n -webkit-transform: translate(0, 9px);\n \/* depth of button press *\/\n\n -webkit-box-shadow:\n\n 0px 0px 0px 0px rgba(128, 128, 128, .6);\n \/* shadow *\/\n background-color: #0688fa;\n }\n\n\n a#lnkDownload {\n display: inline-block;\n border: 1px solid red;\n background-color: deepskyblue;\n color: #ffffff;\n text-shadow: 1px 1px #000000;\n margin-top: 5px;\n margin-bottom: 10px;\n padding: 5px;\n border-radius: 1px;\n border: 5px solid black;\n border-image: url(\"\/fonts\/button.png\") 30;\n -webkit-border-radius: 3px;\n \/* makes round corners *\/\n\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(46, 158, 151, 0.8),\n inset -400px 10px 1px 20px rgba(1, 225, 255, 0.9);\n Filter: blur(0.3px);\n }\n\n #lnkDownload:hover, {\n\n background-color: green;\n }\n\n a#lnkDownload:active,\n \/* input:active, *\/\n .mdi_mdi-format-text:active,\n .mdi_mdi-format-text1:active {\n position: relative;\n \/* top: 1px; *\/\n -webkit-transform: translate(0, 9px);\n \/* depth of button press *\/\n\n -webkit-box-shadow:\n\n 0px 0px 0px 0px rgba(128, 128, 128, .6);\n \/* shadow *\/\n background-color: #0688fa;\n }\n\n #lnkDownload:hover {\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(158, 150, 46, 0.8),\n inset -400px 10px 1px 20px rgba(255, 146, 1, 0.9);\n }\n\n .titles {\n display: block;\n font-size: 120%;\n text-align: center;\n padding: 4px;\n font-family: 'Jost*', \"Roboto\";\n color: rgb(255, 255, 255);\n margin: 10px 5px 7px 5px;\n width: 170px;\n align: center;\n background-color: rgba(0, 0, 0, 0.9);\n }\n\n .titles0 {\n \/* display: inline; *\/\n font-family: 'Jost*', \"Roboto\";\n font-size: 120%;\n text-align: center;\n padding: 10px;\n padding-top: 5px;\n padding-left: 0px;\n color: rgb(255, 255, 255);\n width: \"\"px;\n align: center;\n }\n\n .titles1 {\n display: block-inline;\n font-size: 120%;\n text-align: center;\n padding: 4px;\n font-family: 'Jost*', \"Roboto\";\n color: rgb(255, 255, 255);\n margin: 10px 5px 7px 5px;\n width: 170px;\n align: center;\n background-color: rgba(0, 0, 0, 0.9);\n }\n\n #basic {\n \/* -webkit-text-stroke: 0.5px Black; *\/\n font-weight: 700;\n }\n\n #shadow {\n text-shadow: 3px 3px 1px black;\n \/* -webkit-text-stroke: 0.5px Black; *\/\n }\n\n #shadow1 {\n text-shadow: 3px 3px 1px black;\n }\n\n #toggle {float: right;}\n\n \/* especifico del selectordecolor *\/\n .sp-replacer {\n position: relative;\n float: right;\n left: -35%;\n display: inline-block;\n *display: inline;\n \/* https:\/\/github.com\/bgrins\/spectrum\/issues\/40 *\/\n z-index: 9999994;\n padding: 0px;\n margin-left: 5px;\n margin-right: 5px;\n \/* height: 20px; *\/\n }\n\n .sp-dd {\n color:#000;\n padding-top: 0px;\n padding-right: 4px;\n }\n\n.sp-alpha {\n position: absolute;\n}\n\n .sp-choose {\n border-radius: 1px;\n border: 1px solid black;\n border-image: url(\"\/fonts\/button.png\") 30;\n -webkit-border-radius: 3px;\n }\n <link href=\"\/\/db.onlinewebfonts.com\/c\/d632db3304a2ab2099e1967e15c0b7dd?family=Futura\"rel=\"stylesheet\"type=\"text\/css\"\/>\n<\/style>\n\n","protected":false},"excerpt":{"rendered":"<p>A Postapocalyptical Meme Maker A Postapocalyptical Meme Maker Upload image here: Click here to save image Controls Info Privacy Select type of text Text GreenHUD GreenStat Check GreenText YellowStat Check YellowShunned YellowQuest addedCurrent quest GreenYellowQuest updated GreenQuest updated YellowEverybody disliked that GreenEverybody that YellowDiscovered GreenDiscovered YellowXP gain GreenXP gain YellowEnemyAlly Meme makerMeme template1Meme template2Meme template3 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/2077dreams.com\/index.php\/wp-json\/wp\/v2\/pages\/51"}],"collection":[{"href":"https:\/\/2077dreams.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/2077dreams.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/2077dreams.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/2077dreams.com\/index.php\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":3,"href":"https:\/\/2077dreams.com\/index.php\/wp-json\/wp\/v2\/pages\/51\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/2077dreams.com\/index.php\/wp-json\/wp\/v2\/pages\/51\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/2077dreams.com\/index.php\/wp-json\/wp\/v2\/media?parent=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":51,"date":"2023-06-03T04:34:07","date_gmt":"2023-06-03T04:34:07","guid":{"rendered":"https:\/\/2077dreams.com\/?page_id=51"},"modified":"2023-06-03T04:41:26","modified_gmt":"2023-06-03T04:41:26","slug":"postapocaliptical-meme-generator","status":"publish","type":"page","link":"https:\/\/2077dreams.com\/index.php\/postapocaliptical-meme-generator\/","title":{"rendered":""},"content":{"rendered":"\n\n\nA Postapocalyptical Meme Maker<\/title><\/head>\n\n <div class=\"alignleft\">\n <script type=\"text\/javascript\">\n \tamzn_assoc_ad_type = \"banner\";\n \tamzn_assoc_marketplace = \"amazon\";\n \tamzn_assoc_region = \"US\";\n \tamzn_assoc_placement = \"assoc_banner_placement_default\";\n \tamzn_assoc_campaigns = \"musicandentertainmentrot\";\n \tamzn_assoc_banner_type = \"rotating\";\n \tamzn_assoc_p = \"48\";\n \tamzn_assoc_width = \"728\";\n \tamzn_assoc_height = \"90\";\n \tamzn_assoc_tracking_id = \"justacourier-20\";\n \tamzn_assoc_linkid = \"e8e918a61d2127bd6f741a7220736900\";\n <\/script>\n <script src=\"\/\/z-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1\"><\/script>\n <\/div>\n\n<body background=#\"282C34\">\n <link href=\"https:\/\/fonts.googleapis.com\/css?family=Coming+Soon|Lacquer|Roboto|Roboto+Condensed:400,700|Share+Tech+Mono|VT323|Work+Sans&display=swap\" rel=\"stylesheet\">\n\n\n\n\n\n \n \n <div id=\"canvas-container\">\n <canvas id=\"canvas\" tabindex=\"1\" width=\"800\" height=\"900\" style=\"border:1px solid #1aff81\"><\/canvas>\n <\/div>\n\n \n\n\n <div id=\"upandsave\">\n <p class=\"titles0\"> A Postapocalyptical Meme Maker <\/p><br>\n <p>Upload image here:<\/p> <br>\n <input type='file' id=\"fileUpload\" accept=\"image\/*\" style=\"margin-top: 10px; margin-bottom: 10px\">\n <a id=\"lnkDownload\" title=\"Save\"><span class=\"mdi.mdi-download\"> Click here to save image<\/span><\/a>\n <\/div>\n\n <div class=\"tab\">\n <button class=\"tablinks\" onclick=\"openCity(event, 'London')\">Controls<\/button>\n <button class=\"tablinks\" onclick=\"openCity(event, 'Paris')\">Info<\/button>\n <button class=\"tablinks\" onclick=\"openCity(event, 'Spain')\">Privacy<\/button>\n <\/div>\n\n <div id=\"London\" class=\"tabcontent\">\n \n\n <p class=\"titles1\">Select type of text<\/p>\n <Select id=\"selector\">\n <optgroup label=\"Nuclear\/Western\">\n <option value=\"one\">Text Green<\/option>\n <option value=\"one1\">HUD Green<\/option>\n <option value=\"two\">Stat Check Green<\/option>\n <option value=\"three\">Text Yellow<\/option>\n <option value=\"four\">Stat Check Yellow<\/option>\n <option value=\"four1\">Shunned Yellow<\/option>\n <option value=\"Six\">Quest added<\/option>\n <option value=\"seven\">Current quest<\/option>\n <\/optgroup>\n <optgroup label=\"Nuclear 2: Electric boogaloo\">\n <option value=\"Eight\">Green<\/option>\n <option value=\"Eight1\">Yellow<\/option>\n <option value=\"Nine\">Quest updated Green<\/option>\n <option value=\"Nine1\">Quest updated Yellow<\/option>\n <option value=\"Nine2\">Everybody disliked that Green<\/option>\n <option value=\"Nine3\">Everybody that Yellow<\/option>\n <option value=\"Ten\">Discovered Green<\/option>\n <option value=\"Ten1\">Discovered Yellow<\/option>\n <option value=\"Eleven\">XP gain Green<\/option>\n <option value=\"Eleven1\">XP gain Yellow<\/option>\n <option value=\"Twelve\">Enemy<\/option>\n <option value=\"Twelve1\">Ally<\/option>\n <\/optgroup>\n <optgroup label=\"Meme Maker\">\n <option value=\"five\" selected=\"selected\">Meme maker<\/option>\n <option value=\"thirteen\">Meme template1<\/option>\n <option value=\"Fourteen\">Meme template2<\/option>\n <option value=\"Fifteen\">Meme template3<\/option>\n <\/optgroup>\n <\/Select>\n\n \n\n <p class=\"titles1\">Font<\/p>\n <select id=\"fontFamily\" name=\"font-control\">\n \n <optgroup label=\"Webfonts\">\n <option value=\"monofonto\" selected=\"selected\">monofonto N\/W<\/option>\n <option value=\"Fixedsys Excelsior 3.01\">Fixedsys Excelsior N\/W<\/option>\n <option value=\"Open Sans Condensed\">Open Sans Condensed N\/W<\/option>\n <option value=\"Jost*\">Jost* FUTURA TRIBUTE<\/option>\n <option value=\"FreeSans\">FreeSans<\/option>\n <\/optgroup>\n <optgroup label=\"Gfonts\">\n <option value=\"Roboto Condensed\">Roboto Condensed N2EB<\/option>\n <option value=\"Share Tech Mono\">Share Tech Mono N2EB<\/option>\n <option value=\"Roboto\">Roboto<\/option>\n <option value=\"VT323\">VT323<\/option>\n <option value=\"Lacquer\">Lacquer<\/option>\n <option value=\"Coming Soon\">Coming Soon<\/option>\n <\/optgroup>\n <optgroup label=\"System Fonts\" (may not work)>\n <option value=\"impact\">impact<\/option>\n <option value=\"Courier New\">Courier New<\/option>\n <option value=\"Times New Roman\">Times<\/option>\n <option value=\"Comic Sans MS\">Comic Sans MS<\/option>\n <option value=\"Verdana\">Verdana<\/option>\n <option value=\"Arial\" >Arial<\/option>\n <\/optgroup>\n <\/select>\n\n <select id=\"fontSize\" class=\"manage_font_size\">\n <option value=\"22\">Size<\/option>\n <option value=\"10\">10 PX<\/option>\n <option value=\"15\">15 PX<\/option>\n <option value=\"18\">18 PX<\/option>\n <option value=\"20\">20 PX<\/option>\n <option value=\"22\">22 PX<\/option>\n <option value=\"25\">25 PX<\/option>\n <option value=\"30\">30 PX<\/option>\n <option value=\"35\">35 PX<\/option>\n <option value=\"40\">40 PX<\/option>\n <option value=\"45\">45 PX<\/option>\n <option value=\"50\">50 PX<\/option>\n <option value=\"55\">55 PX<\/option>\n <option value=\"60\">60 PX<\/option>\n <option value=\"65\">65 PX<\/option>\n <option value=\"70\">70 PX<\/option>\n <option value=\"75\">75 PX<\/option>\n <option value=\"80\">80 PX<\/option>\n <option value=\"85\">85 PX<\/option>\n <option value=\"90\">90 PX<\/option>\n <div id=\"22\" class=\"options\" style=\"display:none\">Display with “Select” Selected<\/div>\n <\/select><br>\n\n\n <p> Bold <\/p>\n <input type='checkbox' name='fonttype' class=\"text-cmd\" id=\"text-cmd-bold\" >\n <p> Italic <\/p>\n <input type='checkbox' name='fonttype' class=\"text-cmd\" id=\"text-cmd-italic\" >\n <p> Color <\/p>\n <input type='text' id=\"toggle\" class=\"toggle1\" \/>\n <i id='colorPalette'><\/i>\n \n\n <p class=\"titles\">Add editable textbox <\/p>\n\n <a onclick=\"Addtext()\" title=\"Add editable textbox\">\n <div class=\"mdi_mdi-format-text\" id='basic'> Basic<\/div>\n <\/a>\n <a onclick=\"Addtext1()\" title=\"Add editable textbox with text shadow\">\n <div class=\"mdi_mdi-format-text\" id='shadow'> w\/shadow<\/div>\n <\/a>\n <a onclick=\"Addtext2()\" title=\"Add editable textbox with text shadow\">\n <div class=\"mdi_mdi-format-text\" id='shadow1'> wo\/stroke<\/div>\n <\/a>\n <a onclick=\"Addtext3()\" title=\"Add editable textbox with text shadow\">\n <div class=\"mdi_mdi-format-text\"> wo\/stroke&shadow<\/div>\n <\/a>\n\n\n \n\n <p class=\"titles\">Add rectangle <\/p>\n\n <a onclick=\"AddRect()\" title=\"Add green rectangle\">\n <div class=\"mdi_mdi-format-text-green\">Green<\/div>\n <\/a>\n <a onclick=\"AddRect3()\" title=\"Add yellow rectangle\">\n <div class=\"mdi_mdi-format-text-yellow\">Yellow<\/div>\n <\/a>\n <a onclick=\"AddRect4()\" title=\"Add red rectangle\">\n <div class=\"mdi_mdi-format-text\">Red<\/div>\n <\/a>\n <a onclick=\"AddRect5()\" title=\"Add white rectangle\">\n <div class=\"mdi_mdi-format-text-white\">White<\/div>\n <\/a>\n <a onclick=\"AddRect6()\" title=\"Add black rectangle\">\n <div class=\"mdi_mdi-format-text-black\">Black<\/div>\n <\/a>\n \n\n \n\n \n\n <p class=\"titles\">Controls <\/p>\n\n <button id=\"copy\" onclick=\"Copy()\">Copy<\/button>\n <button id=\"paste\" onclick=\"Paste()\">Paste<\/button>\n <input type=\"button\" class=\"mdi_mdi-format-text1\" value=\"undo\" onclick=\"undo()\">\n <input type=\"button\" class=\"mdi_mdi-format-text1\" value=\"redo\" onclick=\"redo()\">\n\n <button id=\"delete\" class=\"btn btn-info\">Delete Object(s)<\/button>\n\n \n\n <p class=\"titles\">grouping controls <\/p>\n\n <button id=\"group\">Group<\/button>\n <button id=\"ungroup\">Ungroup<\/button>\n\n <p class=\"titles\">Zoom controls <\/p>\n <p>All elements<\/p>\n <button id=\"zoomin\">+<\/button>\n <button id=\"zoomout\">–<\/button>\n <p>Canvas<\/p>\n <button id=\"zoomIn\">+<\/button>\n <button id=\"zoomOut\">–<\/button>\n\n \n\n <p class=\"titles\">move object<\/p>\n <button onclick=\"sendSelectedObjectToFront()\">Front<\/button>\n <button onclick=\"sendSelectedObjectFordward()\"> Fordwards<\/button>\n <button onclick=\"sendSelectedObjectBackwards()\"> backwards<\/button>\n <button onclick=\"sendSelectedObjectBack()\">Back<\/button>\n\n \n\n <p class=\"titles\">Random controls<\/p>\n <button id=\"rmvbackground\">remove background<\/button>\n <button id=\"b\">fit canvas to image<\/button>\n\n \n\n <p class=\"titles\">boxes control<\/p>\n <p>Lock x axis<\/p>\n <input type=\"checkbox\" name=\"LockMovementX\" id=\"lockMovementX\" checked=\"\">\n <p>Lock y axis<\/p>\n <input type=\"checkbox\" name=\"LockMovementY\" id=\"lockMovementY\" >\n <p>Centered scaling<\/p>\n <input type=\"checkbox\" id=\"centeredScaling\" checked=\"\">\n\n \n <input type=\"checkbox\" id=\"hasControls\" checked=\"\" style=\"display:none;\">\n <p style=\"display:none;>Visible<\/p>\n <input type=\"checkbox\" id=\"visible\" style=\"display:none; checked=\"\">\n\n <\/div>\n\n\n\n <div id=\"Paris\" class=\"tabcontent\">\n <ol> Instructions\n <li> Load an image by clicking the Upload image button.<\/li>\n <li> Select a “Scene” or a meme template in the tipe of text menu.<\/li>\n <li> Edit the text content (multiple lines).<\/li>\n <li> Move\/rezise elements (text, Name, elements) to best suite your image.<\/li>\n <li> Save the canvas image by clicking the save image link. <\/li>\n <\/ol>\n <ul>Features:\n <li> Relocate\/Rezise more than 2 elements by pressing shift and selecting both.<\/li>\n <li> Pick a diferent color for the text with the color selector.<\/li>\n <li> You can drag & drop images from your computer.<\/li>\n <li> No watermarks.<\/li>\n <\/ul>\n <ul> Controls:\n <li> All elements are movable and rezisable.<\/li>\n <li> Copy & paste elements with the buttons or Ctrl+C and Ctrl+V (Cmd in Macs), this also works between “layers\/scenes”.<\/li>\n <li> Undo & Redo changes with the buttons or Ctrl+Z and Ctrl+Y (Cmd in Macs) it’s glitchy and changes the color of current text to the one selected in the color picker.<\/li>\n <li> <kbd>Alt<\/kbd> + dragging changes the proportionally scale behaivor (Centered\/Corner scaling).<\/li>\n <li> if you press <kbd> shift <\/kbd> once you can toggle the direction of the x\/y Movement Lock.<\/li>\n <li> Pressing shift allows to move elements in a invisible grid.<\/li>\n <\/ul>\n <ul>\n <li>Tips:<\/li>\n <li>The output image size is 1000\/900px, scaling down the uploaded image to fit the canvas with added transparency for empty spaces.<\/li>\n <li>The boxes scale from center, so it’s better to scale from a corner.<\/li>\n <li>For bold or italic select an interactive textbox and then tick the checkbox.<\/li>\n <li>Image rezising is an experimental feature not completly working.<\/li>\n <li>This is 100% a fanmade project implemented with fabric.js.<\/li>\n <\/ul>\n <ul>\n <li>Known bugs:<\/li>\n <li>The Monofonto text editing it’s a bit twitchy (this is caused by how fabricjs handle text loading).<\/li>\n <li>You can only modify one element color at the time, but all elements are capable of switching color.<\/li>\n <li>Image scaling is not 100% exact for small sizes.<\/li>\n <\/ul>\n <\/div>\n\n\n <div id=\"Spain\" class=\"tabcontent\">\n <p>Privacy policy<\/p> <p>Third party vendors may use cookies to serve ads based prior visits to this website.<\/p>\n <p>All images generated are made and saved locally in browser.<\/p>\n \n\n \n <\/div>\n\n\n <iframe style=\"width:120px;height:240px;\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" frameborder=\"0\" src=\"\/\/ws-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=justacourier-20&marketplace=amazon&region=US&placement=B07FDVCM9Q&asins=B07FDVCM9Q&linkId=abb072f275ef5efa70c1d17598f6c1c8&show_border=true&link_opens_in_new_window=true&price_color=ffb642&title_color=19ff81&bg_color=282c34\">\n <\/iframe>\n\n <iframe style=\"width:120px;height:240px;\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" frameborder=\"0\" src=\"\/\/ws-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=justacourier-20&marketplace=amazon&region=US&placement=B07MTQTNVR&asins=B07MTQTNVR&linkId=1502ffa8a56713dca9add49c738cac39&show_border=true&link_opens_in_new_window=true&price_color=ffb642&title_color=19ff81&bg_color=282c34\">\n <\/iframe>\n\n <iframe style=\"width:120px;height:240px;\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" frameborder=\"0\" src=\"\/\/ws-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=justacourier-20&marketplace=amazon&region=US&placement=B07JDTHWD4&asins=B07JDTHWD4&linkId=69f8afb2e7b3927b651227803883f630&show_border=true&link_opens_in_new_window=true&price_color=ffb642&title_color=19ff81&bg_color=282c34\">\n\n <\/iframe><iframe style=\"width:120px;height:240px;\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" frameborder=\"0\" src=\"\/\/ws-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=justacourier-20&marketplace=amazon&region=US&placement=B00136RJ86&asins=B00136RJ86&linkId=a20587880ee1d3c91f4f7cff58bd2ac9&show_border=true&link_opens_in_new_window=true&price_color=ffb642&title_color=19ff81&bg_color=282c34\">\n <\/iframe>\n\n <iframe style=\"width:120px;height:240px;\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" frameborder=\"0\" src=\"\/\/ws-eu.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=GB&source=ac&ref=tf_til&ad_type=product_link&tracking_id=justacourier-21&marketplace=amazon&region=GB&placement=B06XFS5657&asins=B06XFS5657&linkId=ca7e26f78f7af8787ea94c0c286c061b&show_border=true&link_opens_in_new_window=true&price_color=ffb642&title_color=19ff81&bg_color=282c34\">\n <\/iframe>\n\n <iframe style=\"width:120px;height:240px;\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" frameborder=\"0\" src=\"\/\/rcm-na.amazon-adsystem.com\/e\/cm?ref=tf_til&t=justacourie06-20&m=amazon&o=15&p=8&l=as1&IS1=1&asins=B001CTG610&linkId=68e8bbd2df2f0dca15bb35db01686dab&bc1=282c34&lt1=_top&fc1=FFB642&lc1=1aff81&bg1=282c34&f=ifr\">\n <\/iframe>\n\n <div id=\"invisiblebox\" style='display:inline-block;'>\n <p style=\"font-Family: monofonto;\">\u2000<\/p>\n <p style=\"font-Family: FreeSans;\">\u2000<\/p>\n <p style=\"font-Family: Open Sans Condensed;\">\u2000<\/p>\n <p style=\"font-Family: VT323;\">\u2000<\/p>\n <p style=\"font-Family: Coming Soon;\">\u2000<\/p>\n <p style=\"font-Family: Roboto;\">\u2000<\/p>\n <p style=\"font-Family: Lacquer;\">\u2000<\/p>\n <p style=\"font-Family: Fixedsys Excelsior 3.01;\">\u2000<\/p>\n <\/div>\n\n \n\n \n\n\n\n\n<\/body>\n\n<\/html>\n\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.2.4\/jquery.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fabric.js\/3.3.2\/fabric.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/modernizr\/2.8.3\/modernizr.js\"><\/script>\n<script src=\"\/fonts\/fontfaceobserver.js\" type=\"text\/javascript\"><\/script>\n<script src=\"https:\/\/bgrins.github.io\/spectrum\/spectrum.js\"><\/script>\n<link href=\"https:\/\/bgrins.github.io\/spectrum\/spectrum.css\" rel=\"stylesheet\" \/>\n\n<script>\n\n\n \/\/brings canvas\n var canvas = new fabric.Canvas('canvas', {\n preserveObjectStacking: true,\n });\n\n\n\n \/\/image to canvasScale AND origbackground\n var canvas,\n canvasOriginalWidth = 960,\n canvasOriginalHeight = 900,\n canvasWidth = 1000,\n canvasHeight = 1000,\n imgWidth,\n imgHeight,\n bgImage,\n canvasScale = 1,\n photoUrlPortrait = '\/fonts\/bg.jpg';\n\n $(document).ready(function() {\n\n setCanvasZoom();\n setCanvasSize({\n height: canvasHeight,\n width: canvasWidth\n });\n\n setTimeout(function() {\n setCanvasBackgroundImageUrl(photoUrlPortrait, 0, 0, 1)\n }, 50)\n });\n\n function setCanvasSize(canvasSizeObject) {\n canvas.setWidth(canvasSizeObject.width);\n canvas.setHeight(canvasSizeObject.height);\n }\n\n function setCanvasZoom() {\n canvasWidth = canvasOriginalWidth * canvasScale;\n canvasHeight = canvasOriginalHeight * canvasScale;\n\n canvas.setWidth(canvasWidth);\n canvas.setHeight(canvasHeight);\n }\n\n function setCanvasBackgroundImageUrl(url) {\n if (url && url.length > 0) {\n fabric.Image.fromURL(url, function(img) {\n img.crossOrigin = 'anonymous';\n bgImage = img;\n scaleAndPositionImage();\n });\n } else {\n canvas.backgroundImage = 0;\n canvas.setBackgroundImage('', canvas.renderAll.bind(canvas), {\n crossOrigin: 'anonymous'\n });\n canvas.renderAll();\n }\n }\n\n function scaleAndPositionImage() {\n setCanvasZoom();\n\n var canvasAspect = canvasWidth \/ canvasHeight;\n var imgAspect = bgImage.width \/ bgImage.height;\n var left, top, scaleFactor;\n \/\/ replace with \"if (canvasAspect >= imgAspect)\" for zoomed view \/ \"bgImage.width > bgImage.height\" for scaling to canvas height\n if (bgImage.width > bgImage.height) {\n var scaleFactor = canvasWidth \/ bgImage.width;\n left = 0;\n top = -((bgImage.height * scaleFactor) - canvasHeight) \/ 2;\n } else {\n var scaleFactor = canvasHeight \/ bgImage.height;\n top = 0;\n left = -((bgImage.width * scaleFactor) - canvasWidth) \/ 2;\n }\n\n canvas.setBackgroundImage(bgImage, canvas.renderAll.bind(canvas), {\n top: top,\n left: left,\n originX: 'left',\n originY: 'top',\n scaleX: scaleFactor,\n scaleY: scaleFactor,\n crossOrigin: 'anonymous'\n });\n canvas.renderAll();\n\n }\n \/\/End image to canvasScale\n\n\n \/\/-- adds undo\/redo features currently midbroken\/botched\n canvas.counter = 0;\n var newleft = 0;\n\n var state = [];\n var mods = 0;\n canvas.on(\n 'object:modified',\n function() {\n updateModifications(true);\n },\n 'object:added',\n function() {\n updateModifications(true);\n });\n\n function updateModifications(savehistory) {\n if (savehistory === true) {\n myjson = JSON.stringify(canvas);\n state.push(myjson);\n }\n }\n\n\n\n undo = function undo() {\n if (mods < state.length) {\n canvas.clear().renderAll();\n canvas.loadFromJSON(state[state.length - 1 - mods - 1]);\n canvas.renderAll();\n \/\/console.log(\"geladen \" + (state.length-1-mods-1));\n \/\/console.log(\"state \" + state.length);\n mods += 1;\n \/\/console.log(\"mods \" + mods);\n }\n }\n\n redo = function redo() {\n if (mods > 0) {\n canvas.clear().renderAll();\n canvas.loadFromJSON(state[state.length - 1 - mods + 1]);\n canvas.renderAll();\n \/\/console.log(\"geladen \" + (state.length-1-mods+1));\n mods -= 1;\n \/\/console.log(\"state \" + state.length);\n \/\/console.log(\"mods \" + mods);\n }\n }\n \/\/---end off adds undo\/redo features currently midbroken\/botched\n\n \/\/--- controls to object layer position\n\n var selectedObject;\n canvas.on('object:selected', function(event) {\n selectedObject = event.target;\n });\n\n var sendSelectedObjectBack = function() {\n canvas.sendToBack(selectedObject);\n }\n\n var sendSelectedObjectToFront = function() {\n canvas.bringToFront(selectedObject);\n }\n\n var sendSelectedObjectBackwards = function() {\n canvas.sendBackwards(selectedObject);\n }\n\n var sendSelectedObjectFordward = function() {\n canvas.bringForward(selectedObject);\n }\n\n \/\/--- end of controls to object layer position\n\n \/\/Adds font selection\n $('#fontFamily').change(function() {\n var obj = canvas.getActiveObject();\n if (obj) {\n obj.set($(this).attr('id'), $(this).val());\n }\n canvas.renderAll();\n });\n\n \/* Drag and Drop code adapted from http:\/\/www.html5rocks.com\/en\/tutorials\/dnd\/basics\/ *\/\n \/*\n NOTE: the start and end handlers are events for the <img> elements; the rest are bound to the canvas container.\n *\/\n\n function handleDragStart(e) {\n [].forEach.call(images, function(img) {\n img.classList.remove('img_dragging');\n });\n this.classList.add('img_dragging');\n }\n\n function handleDragOver(e) {\n if (e.preventDefault) {\n e.preventDefault(); \/\/ Necessary. Allows us to drop.\n }\n\n e.dataTransfer.dropEffect = 'copy'; \/\/ See the section on the DataTransfer object.\n \/\/ NOTE: comment above refers to the article (see top) -natchiketa\n\n return false;\n }\n\n function handleDragEnter(e) {\n \/\/ this \/ e.target is the current hover target.\n this.classList.add('over');\n }\n\n function handleDragLeave(e) {\n this.classList.remove('over'); \/\/ this \/ e.target is previous target element.\n }\n\n function handleDrop(e) {\n \/\/ this \/ e.target is current target element.\n\n \/*\n if (e.stopPropagation) {\n e.stopPropagation(); \/\/ stops the browser from redirecting.\n }\n *\/\n\n e.stopPropagation(); \/\/ Stops some browsers from redirecting.\n e.preventDefault(); \/\/ Stops some browsers from redirecting.\n\n \/\/ handle desktop images\n if (e.dataTransfer.files.length > 0) {\n\n var files = e.dataTransfer.files;\n for (var i = 0, f; f = files[i]; i++) {\n\n \/\/ Only process image files.\n if (f.type.match('image.*')) {\n \/\/ Read the File objects in this FileList.\n var reader = new FileReader();\n \/\/ listener for the onload event\n reader.onload = function(evt) {\n \/\/ create img element\n var img = document.createElement('img');\n img.src = evt.target.result;\n\n \/\/ put image on canvas\n var newImage = new fabric.Image(img, {\n width: img.width,\n height: img.height,\n \/\/ Set the center of the new object based on the event coordinates relative to the canvas container.\n left: 0,\n top: 0,\n });\n\n canvas.add(newImage);\n\n \/\/ \/\/ Scale background image --not working rn\n \/\/ {\n \/\/ bgImage = img;\n \/\/ scaleAndPositionImage();\n \/\/ };\n \/\/\n \/\/ canvas.setBackgroundImage(0);\n \/\/ canvas.sendToBack(newImage);\n canvas.bringForward(newImage);\n document.querySelector('#b').onclick = () => {\n canvas.setWidth(newImage.getScaledWidth())\n canvas.setHeight(newImage.getScaledHeight())\n img.set({\n left: 0,\n top: 0\n })\n img.setCoords()\n canvas.requestRenderAll()\n }\n };\n\n \/\/ Read in the image file as a data URL.\n reader.readAsDataURL(f);\n }\n }\n }\n\n \/\/ handle browser images\n else {\n var img = document.querySelector('#images img.img_dragging');\n var newImage = new fabric.Image(img, {\n width: img.width,\n height: img.height,\n \/\/ Set the center of the new object based on the event coordinates relative to the canvas container.\n left: 0,\n top: 0,\n });\n\n canvas.add(newImage);\n }\n\n return false;\n }\n\n\n function handleDragEnd(e) {\n \/\/ this\/e.target is the source node.\n [].forEach.call(images, function(img) {\n img.classList.remove('img_dragging');\n });\n }\n\n if (Modernizr.draganddrop) {\n \/\/ Browser supports HTML5 DnD.\n\n \/\/ Bind the event listeners for the image elements\n var images = document.querySelectorAll('#images img');\n [].forEach.call(images, function(img) {\n img.addEventListener('dragstart', handleDragStart, false);\n img.addEventListener('dragend', handleDragEnd, false);\n });\n \/\/ Bind the event listeners for the canvas\n var canvasContainer = document.getElementById('canvas-container');\n canvasContainer.addEventListener('dragenter', handleDragEnter, false);\n canvasContainer.addEventListener('dragover', handleDragOver, false);\n canvasContainer.addEventListener('dragleave', handleDragLeave, false);\n canvasContainer.addEventListener('drop', handleDrop, false);\n } else {\n \/\/ Replace with a fallback to a library solution.\n alert(\"This browser doesn't support the HTML5 Drag and Drop API.\");\n }\n\n \/\/--------------------------------------------------------------------------------------------------------------------------------------------------------------\n\n var inst = this;\n var activeObj = inst.canvas.getActiveObject();\n\n \/\/text controls\n\n radios5 = document.getElementsByName(\"fonttype\"); \/\/ wijzig naar button\n for (var i = 0, max = radios5.length; i < max; i++) {\n radios5[i].onclick = function() {\n\n if (document.getElementById(this.id).checked == true) {\n if (this.id == \"text-cmd-bold\") {\n canvas.getActiveObject().set(\"fontWeight\", \"bold\");\n }\n if (this.id == \"text-cmd-italic\") {\n canvas.getActiveObject().set(\"fontStyle\", \"italic\");\n }\n \/\/ if (this.id == \"text-cmd-underline\") {\n \/\/ canvas.getActiveObject().set(\"textDecoration\", \"underline\");\n \/\/ }\n \/\/ if (this.id == \"text-cmd-linethrough\") {\n \/\/ canvas.getActiveObject().set(\"textDecoration\", \"line-through\");\n \/\/ }\n \/\/ if (this.id == \"text-cmd-overline\") {\n \/\/ canvas.getActiveObject().set(\"textDecoration\", \"overline\");\n \/\/ }\n\n } else {\n if (this.id == \"text-cmd-bold\") {\n canvas.getActiveObject().set(\"fontWeight\", \"\");\n }\n if (this.id == \"text-cmd-italic\") {\n canvas.getActiveObject().set(\"fontStyle\", \"\");\n }\n \/\/ if (this.id == \"text-cmd-underline\") {\n \/\/ canvas.getActiveObject().set(\"textDecoration\", \"\");\n \/\/ }\n \/\/ if (this.id == \"text-cmd-linethrough\") {\n \/\/ canvas.getActiveObject().set(\"textDecoration\", \"\");\n \/\/ }\n \/\/ if (this.id == \"text-cmd-overline\") {\n \/\/ canvas.getActiveObject().set(\"textDecoration\", \"\");\n \/\/ }\n }\n\n canvas.renderAll();\n }\n };\n\n \/\/select-scene function\n var currentSelection = 'one';\n $(function() {\n $('#selector').change(function() {\n currentSelection = $(this).val()\n $('.options').hide();\n $('#' + currentSelection).show();\n canvas.forEachObject(function(obj) {\n obj.visible = (obj.showWith === currentSelection);\n });\n canvas.renderAll();\n });\n });\n \/\/select-scene end\n\n \/\/Delete selected\n var inst = this;\n var activeObj = inst.canvas.getActiveObject();\n\n function deleteObjects() {\n var activeObject = canvas.getActiveObject();\n if (activeObject) {\n \/*\tif (confirm('Are you sure?')) { *\/\n canvas.discardActiveObject();\n canvas.remove(activeObject);\n \/\/ canvas.remove(Circle);\n \/\/ canvas.remove(Rectangle);\n \/\/ canvas.remove(Arrow);\n }\n }\n\n $(\"#delete\").click(function() {\n canvas.isDrawingMode = false;\n deleteObjects();\n });\n\n\n \/\/ Disables movement of text while selecting font and scene\n document.getElementById(\"fontFamily\").addEventListener('keyup', function (e) {\n e.stopPropagation();\n }, false);\n document.getElementById(\"fontFamily\").addEventListener('keydown', function (e) {\n e.stopPropagation();\n }, false);\n\n document.getElementById(\"selector\").addEventListener('keyup', function (e) {\n e.stopPropagation();\n }, false);\n document.getElementById(\"selector\").addEventListener('keydown', function (e) {\n e.stopPropagation();\n }, false);\n\n document.getElementById(\"fontSize\").addEventListener('keyup', function (e) {\n e.stopPropagation();\n }, false);\n document.getElementById(\"fontSize\").addEventListener('keydown', function (e) {\n e.stopPropagation();\n }, false);\n\n \/\/ move keypresses (todo update kyecodes to keypress)\n\nwindow.onkeydown = function(e) {\n switch (e.keyCode) {\n case 38:\n \/* Up arrow *\/\n e.preventDefault();\n if (canvas.getActiveObject()) {\n canvas.getActiveObject().top -= 2;\n canvas.renderAll();\n }\n break;\n case 40:\n \/* Down arrow *\/\n e.preventDefault();\n if (canvas.getActiveObject()) {\n canvas.getActiveObject().top += 2;\n canvas.renderAll();\n }\n break;\n case 37:\n \/* Left arrow *\/\n if (canvas.getActiveObject()) {\n canvas.getActiveObject().left -= 2;\n canvas.renderAll();\n }\n break;\n case 39:\n \/* Right arrow *\/\n if (canvas.getActiveObject()) {\n canvas.getActiveObject().left += 2;\n canvas.renderAll();\n }\n break;\n }\n }\n\n $(document).keydown(function(e) {\n console.log(e.which);\n if (e.which === 89 && e.ctrlKey) {\n redo()\n \/\/ control + y\n \/\/replay(redo, undo, '#undo', this);\n } else if (e.which === 90 && e.ctrlKey) {\n undo()\n \/\/ control + z\n \/\/replay(undo, redo, '#redo', this);\n } else if (e.which === 67 && e.ctrlKey) {\n \/\/ control + c\n Copy();\n } else if (e.which === 86 && e.ctrlKey) {\n \/\/ control + v\n Paste();\n }\n else if (e.which === 16) {\n \/\/ 18 is Alt key\n $('input[name=LockMovementX]').trigger('click'); \/\/ Triggers a click on LockMovementX\n\n $('input[name=LockMovementY]').trigger('click'); \/\/ Triggers a click on LockMovementY\n }\n });\n \/\/ ends move keypresses\n\n\/\/deletes object, and respects editing delete command\n document.onkeyup = function (e) {\n if (e.keyCode == 46) {\n obj = canvas.getActiveObject();\n if (!obj.isEditing) {\n canvas.remove(obj);\n }\n }\n };\n\n\n\n\n \/\/zoom in zoom out canvas\n setCanvasZoom();\n\n $('#zoomIn').click(function() {\n canvasScale *= 1.25;\n scaleAndPositionImage();\n });\n $('#zoomOut').click(function() {\n canvasScale \/= 1.25;\n scaleAndPositionImage();\n });\n\n $('#zoomin').click(function() {\n canvas.setZoom(canvas.getZoom() * 1.1);\n });\n\n $('#zoomout').click(function() {\n canvas.setZoom(canvas.getZoom() \/ 1.1);\n });\n\n $('#rmvbackground').click(function() {\n canvas.setBackgroundImage(0);\n canvas.renderAll();\n });\n\n\n \/\/zoom in zoom out canvas\n\n \/\/-----------------------------------------------------------------\n\n\n \/\/ observe boolean checkbox\n\n function observeBoolean(property) {\n document.getElementById(property).onclick = function() {\n canvas.getActiveObject()[property] = this.checked;\n canvas.renderAll();\n };\n }\n\n\n function observeOptionsList(property) {\n var list = document.querySelectorAll('#' + property +\n ' [type=\"checkbox\"]');\n for (var i = 0, len = list.length; i < len; i++) {\n list[i].onchange = function() {\n canvas.item(0)[property](this.name, this.checked);\n canvas.renderAll();\n };\n };\n }\n\n \/\/\n\n observeBoolean('lockMovementX');\n observeBoolean('lockMovementY');\n observeBoolean('centeredScaling');\n observeBoolean('visible');\n observeBoolean('hasControls');\n observeOptionsList('setControlVisible');\n\n\n \/\/--------\n\n $('.manage_font_size').change(function() {\n var cur_value = $(this).val();\n if (cur_value != '') {\n var activeObj = canvas.getActiveObject();\n \/\/Check that text is selected\n if (activeObj == undefined) {\n alert('Please select a Text');\n return false;\n }\n activeObj.set({\n scaleX: 1,\n scaleY: 1,\n fontSize: cur_value\n });\n canvas.renderAll();\n }\n });\n \/\/--------\n\n \/\/---- Starts grouping\n\n $(\"#group\").on('click', function() {\n\n var activeObj = canvas.getActiveObject();\n var activegroup = activeObj.toGroup();\n var objectsInGroup = activegroup.getObjects();\n activegroup.clone(function(newgroup) {\n canvas.remove(activegroup);\n objectsInGroup.forEach(function(object) {\n canvas.remove(object);\n });\n canvas.add(newgroup);\n });\n });\n $(\"#ungroup\").click(function() {\n var activeObject = canvas.getActiveObject();\n if (activeObject.type == \"group\") {\n var items = activeObject._objects;\n activeObject._restoreObjectsState();\n canvas.remove(activeObject);\n for (var i = 0; i < items.length; i++) {\n canvas.add(items[i]);\n canvas.item(canvas.size() - 1).hasControls = true;\n }\n\n canvas.renderAll();\n }\n });\n\n\n\n \/\/--------- ends grouping\n\n \/\/----------- load fonts\n\n var font = new FontFaceObserver('monofonto', {\n });\n\nfont.load().then(function () {\n console.log('Font is available monofonto');\n fabric.util.clearFabricFontCache(\"monofonto\".toLowerCase()); \/\/botched working for lazyfonts\n \/\/ fabric.util.clearFabricFontCache(''); example for clearing all fonts cache\n}, function () {\n console.log('Font is not available');\n});\nvar font1 = new FontFaceObserver('Share Tech Mono', {\n});\n\nfont1.load().then(function () {\nconsole.log('Font is available Share Tech Mono');\n}, function () {\nconsole.log('Font is not available');\n});\n\nvar font2 = new FontFaceObserver('Fixedsys Excelsior 3.01', {\n});\n\nfont2.load().then(function () {\nconsole.log('Font is available Fixedsys Excelsior 3.01');\n}, function () {\nconsole.log('Font is not available');\n});\n \/\/------------Adds button Rectangles------------------\n\n function AddRect() {\n canvas.add(new fabric.Rect({\n fill: 'rgba(26,255,129, 0.15)',\n left: 170,\n top: 680,\n width: 670,\n height: 30,\n centeredScaling: true,\n strokeUniform: true,\n lockMovementX: true,\n stroke: '#19ff81',\n strokeWidth: 2,\n }));\n }\n\n function AddRect3() {\n canvas.add(new fabric.Rect({\n fill: 'rgba(255,182,66, 0.15)',\n left: 170,\n top: 680,\n width: 670,\n height: 30,\n centeredScaling: true,\n strokeUniform: true,\n lockMovementX: true,\n stroke: 'rgba(255,182,66, 1 )',\n strokeWidth: 2,\n }));\n }\n\n\n function AddRect4() {\n canvas.add(new fabric.Rect({\n fill: 'rgba(250,0,0, 0.15)',\n left: 170,\n top: 680,\n width: 670,\n height: 30,\n centeredScaling: true,\n strokeUniform: true,\n lockMovementX: true,\n stroke: 'rgba(139,0,0, 1 )',\n strokeWidth: 2,\n }));\n }\n\n function AddRect5() {\n canvas.add(new fabric.Rect({\n fill: 'rgba(255,255,255, 1.00)',\n left: 170,\n top: 680,\n width: 670,\n height: 30,\n strokeUniform: true,\n }));\n }\n\n function AddRect6() {\n canvas.add(new fabric.Rect({\n fill: 'rgba(0,0,0, 1.00)',\n left: 170,\n top: 680,\n width: 670,\n height: 30,\n strokeUniform: true,\n }));\n }\n\n function AddRect7() {\n canvas.add(new fabric.Rect({\n fill: 'rgba(0,0,0, 0.45)',\n left: 152,\n top: 590,\n width: 700,\n height: 120,\n centeredScaling: true,\n strokeUniform: true,\n lockMovementX: true,\n rx: 15,\n ry: 15,\n shadow: {\n color: 'rgba(0, 0, 0, 0.99)',\n blur: 20,\n offsetX: 0,\n offsetY: 0,\n }\n }));\n }\n\n function Addtext() {\n canvas.add(new fabric.IText('Basic', {\n left: 150,\n top: 150,\n fontFamily: 'Open Sans Condensed',\n fill: 'rgba(#ff0000, 0.99)',\n stroke: '#000',\n strokeWidth: 1,\n fontSize: 35,\n }));\n }\n\n\n function Addtext1() {\n canvas.add(new fabric.IText('w\/shadow', {\n left: 150,\n top: 150,\n fontFamily: 'Open Sans Condensed',\n fill: 'rgba(#ff0000, 0.99)',\n stroke: '#000',\n fontSize: 35,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n }));\n }\n\n function Addtext2() {\n canvas.add(new fabric.IText('wo\/stroke', {\n left: 150,\n top: 150,\n fontFamily: 'Open Sans Condensed',\n fill: 'rgba(#ff0000, 0.99)',\n fontSize: 35,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n }));\n }\n\n function Addtext3() {\n canvas.add(new fabric.IText('Wo\/stroke&shadow', {\n left: 150,\n top: 150,\n fontFamily: 'Open Sans Condensed',\n fill: 'rgba(#ff0000, 0.99)',\n fontSize: 35,\n }));\n }\n\n var poly = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 40\n }, {\n x: 690,\n y: 40\n }, {\n x: 690,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 155,\n top: 810,\n });\n\n function AddRect1() {\n \/\/ \"add\" upper\/lower green line onto canvas\n canvas.add(poly);\n\n }\n\n var poly2 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: -40\n }, {\n x: 690,\n y: -40\n }, {\n x: 690,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n lockMovementX: true,\n left: 155,\n top: 730,\n\n });\n\n \/\/ vertical linear gradient\n poly2.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n\n function AddRect2() {\n \/\/ \"add\" upper\/lower green line onto canvas\n canvas.add(poly2);\n }\n\n\n \/\/----------------------------------------\n\n \/\/text boxes and rectangle\n\n \/\/ Adds name text1\n canvas.add(new fabric.IText('Hash Brown', {\n\n fontFamily: 'monofonto',\n left: 700,\n top: 160,\n fontSize: 22,\n fill: \"#1aff81\",\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'one',\n visible: currentSelection === 'one',\n }));\n \/\/end text\n\n \/\/ \/\/ create a rectangle object for text1\n \/\/ var rect = new fabric.Rect({\n \/\/ fill: 'rgba(0, 16, 8, 0.45)',\n \/\/ left: 152,\n \/\/ top: 590,\n \/\/ width: 700,\n \/\/ height: 120,\n \/\/ strokeUniform: true,\n \/\/ centeredScaling: true,\n \/\/ lockMovementX: true,\n \/\/ showWith: 'one',\n \/\/ visible: currentSelection === 'one',\n \/\/ stroke: 'rgba(0, 0, 0, 0.10)',\n \/\/ strokeWidth: 0.1,\n \/\/ rx: 15,\n \/\/ ry: 15,\n \/\/ shadow: {\n \/\/ color: 'rgba(0, 0, 0, 1.00)',\n \/\/ blur: 20,\n \/\/ offsetX: 0,\n \/\/ offsetY: 0,\n \/\/ }\n \/\/ });\n \/\/\n \/\/ \/\/ \"add\" rectangle onto canvas\n \/\/ canvas.add(rect);\n \/\/ \/\/End black rect. object.\n\n\n var imgURL = '\/fonts\/textbar.png';\n\n var textbgImg = new Image();\n textbgImg.onload = function(img) {\n var textbg = new fabric.Image(textbgImg, {\n width: 1024,\n height: 256,\n left: 148,\n top: 570,\n scaleX: .70,\n scaleY: .60,\n opacity: 0.80,\n lockMovementX: true,\n showWith: 'one',\n visible: currentSelection === 'one',\n crossOrigin: 'anonymous',\n });\n\n canvas.add(textbg);\n canvas.sendToBack(textbg);\n };\n textbgImg.src = imgURL;\n\n\n \/\/ Adds editable text1\n var textbox = new fabric.IText('Here take a few radiation Chems, as my little way of saying, \\n\"I\\'m sorry I twisted your DNA like a kitten with ball of \\nyarn.\"', {\n fontFamily: 'monofonto',\n \/\/ fontFamily: 'Consolas',\n left: 180,\n top: 600,\n fontSize: 22,\n fill: \"#1aff81\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'one',\n visible: currentSelection === 'one',\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n });\n\n\n canvas.add(textbox)\n\n\n \/\/ _initDimensions()\n \/\/ fabric.IText._forceClearCache; needs reworking\n \/\/ Adds name text for checktest1\n\n\n\n\n\n \/\/HUD green start\n\n \/\/ \"add\" topline HP\n var HPtop = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 40\n }, {\n x: 250,\n y: 40\n },\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 3,\n left: 125,\n top: 795,\n });\n \/\/ \"add\" topline onto canvas\n\n \/\/ vertical linear gradient\n\n HPtop.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n var HPbottom = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: -35\n }, {\n x: 250,\n y: -35\n },\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 3,\n left: 125,\n top: 830,\n\n });\n \/\/ \"add\" bottomline HP\n\n\n \/\/ vertical linear gradient\n HPbottom.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n\n \/\/triangle top HP\n var HPtritop = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 12\n }, {\n x: 10,\n y: 12\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 340,\n top: 815,\n });\n \/\/ \"add\" triangle top onto canvas\n\n\n \/\/triangle bottom HP\n var HPtribottom = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 8,\n y: 8\n }, {\n x: 16,\n y: 0\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 240,\n top: 835,\n });\n \/\/ \"add\" triangle top onto canvas\n\n var groupHP = new fabric.Group([ HPtop, HPbottom, HPtritop, HPtribottom ], {\n lockMovementY: true,\n strokeWidth: 10,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n shadow: {\n color: 'rgba(0, 0, 0, 0.99)',\n blur: 5,\n offsetX: 0,\n offsetY: 0,\n }\n });\n\n canvas.add(groupHP);\n\n var HPbar_01 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 8,\n left: 60,\n top: 810,\n });\n\n var HPbar_02 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 8,\n left: 70,\n top: 810,\n });\n\n var HPbar_03 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 8,\n left: 80,\n top: 810,\n });\n\n var HPbar_04 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 8,\n left: 90,\n top: 810,\n });\n\n var HPbar_05 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 8,\n left: 100,\n top: 810,\n });\n\n var HPbar_06 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 8,\n left: 110,\n top: 810,\n });\n\n HPbar_01.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 0.25: 'rgba(26,255,129, 1.0)',\n 0.5: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n HPbar_02.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 0.25: 'rgba(26,255,129, 1.0)',\n 0.5: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n HPbar_03.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 0.25: 'rgba(26,255,129, 1.0)',\n 0.5: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n HPbar_04.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 0.25: 'rgba(26,255,129, 1.0)',\n 0.5: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n HPbar_05.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 0.25: 'rgba(26,255,129, 1.0)',\n 0.5: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n HPbar_06.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 0.25: 'rgba(26,255,129, 1.0)',\n 0.5: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n var groupHPbars = new fabric.Group([ HPbar_01,HPbar_02,HPbar_03,HPbar_04,HPbar_05,HPbar_06 ], {\n lockMovementY: true,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n left: 135,\n shadow: {\n color: 'rgba(0, 0, 0, 0.99)',\n blur: 5,\n offsetX: 0,\n offsetY: 0,\n }\n });\n\n canvas.add(groupHPbars);\n\n\n var HPcompassmarker = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 15\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 6,\n left: 160,\n top: 840,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n });\n \/\/ \"add\" bottom compass marker\n canvas.add(HPcompassmarker);\n\n \/\/ \"adds\" compass arrow\n var HParrowmarker = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 30\n },{\n x: 10,\n y: 25\n },{\n x: 20,\n y: 30\n },{\n x: 20,\n y: 0\n },{\n x: 10,\n y: -16\n },{\n x: 0,\n y: 0\n },\n\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 1,\n left:160,\n top: 860,\n scaleX: .70,\n scaleY: .70,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n shadow: {\n color: 'rgba(0, 0, 0, 0.99)',\n blur: 5,\n offsetX: 0,\n offsetY: 0,\n }\n });\n \/\/ \"add\" compass arrow\n canvas.add(HParrowmarker);\n\n\n\n var HPcompass_left = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 5\n }, {\n x: 20,\n y: 5\n },{\n x: 20,\n y: 0\n },{\n x: 20,\n y: 5\n },{\n x: 40,\n y: 5\n },{\n x: 40,\n y: 0\n },{\n x: 40,\n y: 5\n },{\n x: 60,\n y: 5\n },{\n x: 60,\n y: 0\n },{\n x: 60,\n y: 5\n },{\n x: 80,\n y: 5\n }\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 3,\n left: 135,\n top: 850,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n shadow: {\n color: 'rgba(0, 0, 0, 0.99)',\n blur: 5,\n offsetX: 0,\n offsetY: 0,\n }\n });\n \/\/ \"add\" compass bar 1\n canvas.add(HPcompass_left);\n\n\n\n var HPcompass_center = new fabric.Polyline([\n {\n x: 0,\n y: 5\n }, {\n x: 20,\n y: 5\n },{\n x: 20,\n y: 0\n },{\n x: 20,\n y: 5\n },{\n x: 40,\n y: 5\n },{\n x: 40,\n y: 0\n },{\n x: 40,\n y: 5\n },{\n x: 60,\n y: 5\n },{\n x: 60,\n y: 0\n },{\n x: 60,\n y: 5\n },{\n x: 80,\n y: 5\n }\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 3,\n left: 235,\n top: 850,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n shadow: {\n color: 'rgba(0, 0, 0, 0.99)',\n blur: 5,\n offsetX: 0,\n offsetY: 0,\n }\n });\n \/\/ \"add\" compass bar 2\n canvas.add(HPcompass_center);\n\n var HPcompass_right = new fabric.Polyline([\n {\n x: 0,\n y: 5\n }, {\n x: 20,\n y: 5\n },{\n x: 20,\n y: 0\n },{\n x: 20,\n y: 5\n },{\n x: 40,\n y: 5\n },{\n x: 40,\n y: 0\n },{\n x: 40,\n y: 5\n },{\n x: 60,\n y: 5\n },{\n x: 60,\n y: 0\n },\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 3,\n left: 320,\n top: 850,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n shadow: {\n color: 'rgba(0, 0, 0, 0.99)',\n blur: 5,\n offsetX: 0,\n offsetY: 0,\n }\n });\n \/\/ \"add\" compass bar 3\n canvas.add(HPcompass_right);\n\n\n\n\n \/\/ Adds editable text HP\n canvas.add(new fabric.IText('HP', {\n fontFamily: 'monofonto',\n left: 140,\n top: 785,\n fontSize: 22,\n fill: \"#1aff81\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementY: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n lineHeight: 1.4,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n }));\n\n \/\/ Adds editable N\n canvas.add(new fabric.IText('N', {\n fontFamily: 'monofonto',\n left: 220,\n top: 845,\n fontSize: 22,\n fill: \"#1aff81\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementY: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n lineHeight: 1.4,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n }));\n\n \/\/ Adds editable text1\n var textbox = new fabric.IText('Haha, Gery!', {\n fontFamily: 'monofonto',\n \/\/ fontFamily: 'Consolas',\n left: 180,\n top: 600,\n fontSize: 22,\n fill: \"#1aff81\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n });\n\n\n canvas.add(textbox)\n\n canvas.add(new fabric.IText('Gery', {\n\n fontFamily: 'monofonto',\n left: 700,\n top: 160,\n fontSize: 22,\n fill: \"#1aff81\",\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'one1',\n visible: currentSelection === 'one1',\n }));\n\n var polyAPbar = new fabric.Polyline([\n {\n x: 0,\n y: 40\n }, {\n x: 250,\n y: 40\n }, {\n x: 250,\n y: 0\n },\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 515,\n top: 795,\n });\n\n \/\/ vertical linear gradient\n polyAPbar.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n \/\/ \"add\" topline on AP\n\n\n var polyAPbarbottom1 = new fabric.Polyline([\n {\n x: 0,\n y: -40\n }, {\n x: 120,\n y: -40\n }, {\n x: 120,\n y: 0\n },\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 515,\n top: 840,\n });\n\n \/\/ vertical linear gradient\n polyAPbarbottom1.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n\n \/\/ \"add\" bottomline 1 on AP bar\n\n\n var polyAPbarbottom2 = new fabric.Polyline([\n {\n x: 0,\n y: -40\n }, {\n x: 120,\n y: -40\n }, {\n x: 120,\n y: 0\n },\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 645,\n top: 840,\n });\n\n \/\/ vertical linear gradient\n polyAPbarbottom2.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n\n \/\/ \"add\" bottomline 2 on AP bar\n\n\n \/\/triangle top\n var polyAptri = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 12\n }, {\n x: -10,\n y: 12\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 540,\n top: 820,\n });\n \/\/ \"add\" triangle top onto canvas\n\n\n var groupAP = new fabric.Group([ polyAPbar ,polyAPbarbottom1,polyAPbarbottom2, polyAptri ], {\n lockMovementY: true,\n left:580,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n shadow: {\n color: 'rgba(0, 0, 0, 0.99)',\n blur: 5,\n offsetX: 0,\n offsetY: 0,\n }\n });\n\n canvas.add(groupAP);\n\n\n var polyAPpoint1 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 8,\n left: 820,\n top: 810,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n });\n \/\/ \"add\" topline onto canvas\n\n canvas.add(polyAPpoint1);\n\n polyAPpoint1.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 40,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 0.25: 'rgba(26,255,129, 1.0)',\n 0.5: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n var polyCnd1 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 55,\n y: 0\n },\n ], {\n fill: 'rgba(8, 116, 31, 1.00)',\n stroke: 'rgba(8, 116, 31, 1)',\n lockMovementY: true,\n strokeWidth: 16,\n left: 630,\n top: 855,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n });\n \/\/ \"add\" dark green bar AP\n canvas.add(polyCnd1);\n\n var polyCnd = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 40,\n y: 0\n },\n ], {\n fill: 'rgba(26,255,129, 1.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementY: true,\n strokeWidth: 16,\n left: 630,\n top: 855,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n });\n \/\/ \"add\" green bar AP\n canvas.add(polyCnd);\n\n\n\n\n \/\/ Adds editable AP\n canvas.add(new fabric.IText('AP', {\n fontFamily: 'monofonto',\n left: 800,\n top: 790,\n fontSize: 22,\n fill: \"#1aff81\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementY: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n lineHeight: 1.4,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n }));\n\n \/\/ Adds condition text\n canvas.add(new fabric.IText('CND', {\n fontFamily: 'monofonto',\n left: 600,\n top: 850,\n fontSize: 22,\n fill: \"#1aff81\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementY: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n lineHeight: 1.4,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n }));\n\n \/\/ Adds ammo counter text\n canvas.add(new fabric.IText('11\/104', {\n fontFamily: 'monofonto',\n left: 760,\n top: 850,\n fontSize: 22,\n fill: \"#1aff81\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementY: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n lineHeight: 1.4,\n showWith: 'one1',\n visible: currentSelection === 'one1',\n }));\n\n \/\/HUD green end\n\n\n\n\n\n\n\n\n canvas.add(new fabric.IText('Hash Brown', {\n\n fontFamily: 'monofonto',\n left: 700,\n top: 160,\n fontSize: 22,\n fill: \"#1aff81\",\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'two',\n visible: currentSelection === 'two',\n }));\n \/\/end text\n\n var textbgImg1 = new Image();\n textbgImg1.onload = function(img) {\n var textbg = new fabric.Image(textbgImg, {\n width: 1024,\n height: 256,\n left: 125,\n top: 560,\n scaleX: .73,\n scaleY: .95,\n opacity: 0.80,\n lockMovementX: true,\n showWith: 'two',\n visible: currentSelection === 'two',\n crossOrigin: 'anonymous',\n });\n\n canvas.add(textbg);\n canvas.sendToBack(textbg);\n };\n\n textbgImg1.src = imgURL;\n\n\n \/\/ create a rectangle3 object for checktest1\n \/\/ var recta = new fabric.Rect({\n \/\/ fill: 'rgba(0, 16, 8, 0.65)',\n \/\/ left: 157,\n \/\/ top: 590,\n \/\/ width: 690,\n \/\/ height: 180,\n \/\/ strokeUniform: true,\n \/\/ centeredScaling: true,\n \/\/ lockMovementX: true,\n \/\/ stroke: 'rgba(255,255,255, 0.50)',\n \/\/ strokeWidth: 0.1,\n \/\/ showWith: 'two',\n \/\/ visible: currentSelection === 'two',\n \/\/ rx:15,\n \/\/ ry:15,\n \/\/ shadow: {\n \/\/ color: 'rgba(0, 0, 0, 0.99)',\n \/\/ blur: 20,\n \/\/ offsetX:0,\n \/\/ offsetY:0,\n \/\/ \/\/ showWith: 'two',\n \/\/ \/\/ visible: currentSelection === 'two'\n \/\/ }\n \/\/ });\n \/\/\n \/\/ canvas.add(recta);\n\n\n \/\/ Adds editable text for checktest\n canvas.add(new fabric.IText('Just do your examination and fix me up please.\\n[Perception] If i listen closely, I can hear my genes\\ncrying.\\n[Charisma] Oh, I feel fine! <cough> Never better! <cough>\\nNo problem at all! <wheeze>.', {\n fontFamily: 'monofonto',\n left: 180,\n top: 600,\n fontSize: 22,\n fill: \"#1aff81\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementX: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'two',\n visible: currentSelection === 'two',\n lineHeight: 1.4\n }));\n\n\n \/\/ \/\/ vertical linear gradient recta\n \/\/ recta.setGradient('fill', {\n \/\/ type: 'linear',\n \/\/ type: 'radial',\n \/\/ r1: 140,\n \/\/ r2: 700,\n \/\/ x1: 345,\n \/\/ y1: 70,\n \/\/ x2: 345,\n \/\/ y2: 70,\n \/\/ colorStops: {\n \/\/ 0: 'rgba(0,0,0, 0.9)',\n \/\/ 1: 'rgba(255,255,255, 0.1)'\n \/\/ }\n \/\/ });\n \/\/ \"add\" bottomline onto canvas\n var poly = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n }, {\n x: 690,\n y: 20\n }, {\n x: 690,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n lockMovementX: true,\n left: 155,\n top: 750,\n showWith: 'two',\n visible: currentSelection === 'two',\n });\n \/\/ \"add\" bottomline onto canvas\n canvas.add(poly);\n\n \/\/ vertical linear gradient\n poly.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 20,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n\n var poly2 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: -20\n }, {\n x: 690,\n y: -20\n }, {\n x: 690,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 155,\n top: 590,\n showWith: 'two',\n visible: currentSelection === 'two',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(poly2);\n\n \/\/ vertical linear gradient\n poly2.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 20,\n colorStops: {\n 0: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n\n \/\/ \"add\" arrowtop\n var poly3 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 10,\n y: -10\n }, {\n x: 20,\n y: 0\n },\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n left: 146,\n top: 615,\n lockMovementX: true,\n showWith: 'two',\n visible: currentSelection === 'two',\n });\n \/\/ \"add\" arrowtop onto canvas\n canvas.add(poly3);\n\n \/\/ vertical linear gradient\n poly3.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 10,\n colorStops: {\n 0: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n\n \/\/ \"add\" arrowbottom\n var poly4 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 10,\n y: 10\n }, {\n x: 20,\n y: 0\n },\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n left: 146,\n top: 735,\n lockMovementX: true,\n showWith: 'two',\n visible: currentSelection === 'two',\n });\n \/\/ \"add\" arrowbottom onto canvas\n canvas.add(poly4);\n\n \/\/ vertical linear gradient\n poly4.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 10,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 1: 'rgba(26,255,129, 1.0)'\n }\n });\n \/\/ end arrowbottom onto canvas\n\n \/\/vertical slider glowline\n var poly5 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 60\n },\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n left: 156,\n top: 625,\n lockMovementX: true,\n showWith: 'two',\n visible: currentSelection === 'two',\n });\n \/\/draws vertical slider glowline\n canvas.add(poly5);\n\n \/\/ vertical linear gradient\n poly5.setGradient('stroke', {\n type: 'linear',\n\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 60,\n colorStops: {\n 0: 'rgba(0,0,0, 0.8)',\n 0.5: 'rgba(26,255,129, 1.0)',\n 1: 'rgba(0,0,0, 0.8)',\n }\n });\n \/\/ends vertical slider glowline\n\n\n \/\/ Adds name text2\n canvas.add(new fabric.IText('Fantastic', {\n\n fontFamily: 'monofonto',\n left: 700,\n top: 160,\n fontSize: 22,\n fill: \"#FFB642\",\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'three',\n visible: currentSelection === 'three',\n }));\n \/\/end text\n\n \/\/ \/\/ create a rectangle object for text2\n \/\/ var rect = new fabric.Rect({\n \/\/ fill: 'rgba(0, 16, 8, 0.45)',\n \/\/ left: 152,\n \/\/ top: 590,\n \/\/ width: 700,\n \/\/ height: 120,\n \/\/ strokeUniform: true,\n \/\/ centeredScaling: true,\n \/\/ lockMovementX: true,\n \/\/ showWith: 'three',\n \/\/ visible: currentSelection === 'three',\n \/\/ stroke: 'rgba(0, 0, 0, 0.10)',\n \/\/ strokeWidth: 0.1,\n \/\/ rx: 15,\n \/\/ ry: 15,\n \/\/ shadow: {\n \/\/ color: 'rgba(0, 0, 0, 0.99)',\n \/\/ blur: 20,\n \/\/ offsetX: 0,\n \/\/ offsetY: 0,\n \/\/ }\n \/\/ });\n \/\/\n \/\/ \/\/ \"add\" rectangle onto canvas\n \/\/ canvas.add(rect);\n \/\/ \/\/End black rect. object.\n\n\n\n \/\/ Adds editable text2\n canvas.add(new fabric.IText('\"They asked me how well I understood theoretical physics.\" I\\n said I had a theoretical degree in physics. They said\\n welcome aboard.', {\n fontFamily: 'monofonto',\n left: 180,\n top: 600,\n fontSize: 22,\n fill: \"#ffb642\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'three',\n visible: currentSelection === 'three',\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n }));\n\n\n var imgURL = '\/fonts\/textbar.png';\n\n var textbgImg2 = new Image();\n textbgImg2.onload = function(img) {\n var textbg = new fabric.Image(textbgImg, {\n width: 1024,\n height: 256,\n left: 150,\n top: 570,\n scaleX: .70,\n scaleY: .60,\n opacity: 0.80,\n lockMovementX: true,\n showWith: 'three',\n visible: currentSelection === 'three',\n crossOrigin: 'anonymous',\n });\n\n canvas.add(textbg);\n canvas.sendToBack(textbg);\n };\n textbgImg2.src = imgURL;\n\n\n \/\/------------ checktest here\n\n\n\n\n \/\/ stat check 2 starts here -----------------------------------------------------------------\n\n \/\/ Adds name text\n canvas.add(new fabric.IText('Fantastic', {\n\n fontFamily: 'monofonto',\n left: 700,\n top: 160,\n fontSize: 22,\n fill: \"#ffb642\",\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'four',\n visible: currentSelection === 'four',\n }));\n \/\/end name text\n\n \/\/ \/\/ create a stat check rectangle\n \/\/ var rectanv = new fabric.Rect({\n \/\/ fill: 'rgba(0, 16, 8, 0.65)',\n \/\/ left: 157,\n \/\/ top: 590,\n \/\/ width: 690,\n \/\/ height: 180,\n \/\/ strokeUniform: true,\n \/\/ centeredScaling: true,\n \/\/ lockMovementX: true,\n \/\/ stroke: 'rgba(255,255,255, 0.50)',\n \/\/ strokeWidth: 0.1,\n \/\/ showWith: 'four',\n \/\/ visible: currentSelection === 'four',\n \/\/ \/\/ rx:15,\n \/\/ \/\/ ry:15,\n \/\/ \/\/ shadow: {\n \/\/ \/\/ color: 'rgba(0, 0, 0, 0.99)',\n \/\/ \/\/ blur: 20,\n \/\/ \/\/ offsetX:0,\n \/\/ \/\/ offsetY:0,\n \/\/ \/\/ \/\/ showWith: 'four',\n \/\/ \/\/ \/\/ visible: currentSelection === 'four'\n \/\/ \/\/ }\n \/\/ });\n \/\/ \/\/\n \/\/ \/\/ adds a stat check rectangle\n \/\/ canvas.add(rectanv);\n \/\/ \/\/ end of stat check rectangle\n\n\n \/\/ Adds editable stat check text\n canvas.add(new fabric.IText('[Speech 25] You pay me a stack of caps right now and I\\'ll\\nforget you have my job.\\nActually I\\'m not here to replace you.\\n[Attack] You won\\'t need to worry about bills where you\\'re \\ngoing.', {\n fontFamily: 'monofonto',\n left: 180,\n top: 600,\n fontSize: 22,\n fill: \"#ffb642\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementX: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'four',\n visible: currentSelection === 'four',\n lineHeight: 1.4\n }));\n \/\/ end of editable stat check text\n\n \/\/ Adds bottomline on canvas\n var polynv = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n }, {\n x: 690,\n y: 20\n }, {\n x: 690,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n lockMovementX: true,\n left: 155,\n top: 750,\n showWith: 'four',\n visible: currentSelection === 'four',\n });\n \/\/ \"add\" bottomline onto canvas\n canvas.add(polynv);\n\n\n \/\/ adds linear gradient to bottomline\n polynv.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 20,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 1: 'rgba(255,182,66, 1.0)'\n }\n });\n \/\/ end of bottomline on canvas\n\n \/\/ \"add\" topline onto canvas\n var poly2nv = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: -20\n }, {\n x: 690,\n y: -20\n }, {\n x: 690,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 155,\n top: 590,\n showWith: 'four',\n visible: currentSelection === 'four',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(poly2nv);\n\n \/\/ vertical linear gradient\n poly2nv.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 20,\n colorStops: {\n 0: 'rgba(255,182,66, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n\n \/\/ \"add\" arrowtop\n var poly3nv = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 10,\n y: -10\n }, {\n x: 20,\n y: 0\n },\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n left: 146,\n top: 615,\n lockMovementX: true,\n showWith: 'four',\n visible: currentSelection === 'four',\n });\n \/\/ \"add\" arrowtop onto canvas\n canvas.add(poly3nv);\n\n \/\/ adds vertical linear gradient to arrowtop\n poly3nv.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 10,\n colorStops: {\n 0: 'rgba(255,182,66, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n \/\/ end of arrowtop\n\n \/\/ \"add\" arrowbottom\n var poly4nv = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 10,\n y: 10\n }, {\n x: 20,\n y: 0\n },\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n left: 146,\n top: 735,\n lockMovementX: true,\n showWith: 'four',\n visible: currentSelection === 'four',\n });\n \/\/ \"add\" arrowbottom onto canvas\n canvas.add(poly4nv);\n\n \/\/ vertical linear gradient arrowbottom\n poly4nv.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 10,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 1: 'rgba(255,182,66, 1.0)'\n }\n });\n \/\/ end arrowbottom onto canvas\n\n \/\/vertical slider glowline\n var poly5nv = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 60\n },\n\n ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n left: 156,\n top: 625,\n lockMovementX: true,\n showWith: 'four',\n visible: currentSelection === 'four',\n });\n \/\/draws vertical slider glowline\n canvas.add(poly5nv);\n\n \/\/ vertical linear gradient slider glowline\n poly5nv.setGradient('stroke', {\n type: 'linear',\n\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 60,\n colorStops: {\n 0: 'rgba(0,0,0, 0.8)',\n 0.5: 'rgba(255,182,66, 1.0)',\n 1: 'rgba(0,0,0, 0.8)',\n }\n });\n \/\/ends vertical slider glowline\n\n var textbgImg4 = new Image();\n textbgImg4.onload = function(img) {\n var textbg = new fabric.Image(textbgImg, {\n width: 1024,\n height: 256,\n left: 125,\n top: 560,\n scaleX: .73,\n scaleY: .95,\n opacity: 0.80,\n lockMovementX: true,\n showWith: 'four',\n visible: currentSelection === 'four',\n crossOrigin: 'anonymous',\n });\n\n canvas.add(textbg);\n canvas.sendToBack(textbg);\n };\n textbgImg4.src = imgURL;\n\n\/\/ ends stat check NV\n\n\/\/ starts shunned NV\n\n\n \/\/ stat check 2 starts here -----------------------------------------------------------------\n\n \/\/ Adds name text\n canvas.add(new fabric.IText('Fantastic', {\n\n fontFamily: 'monofonto',\n left: 700,\n top: 160,\n fontSize: 22,\n fill: \"#ffb642\",\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'four1',\n visible: currentSelection === 'four1',\n }));\n \/\/end name text\n\n \/\/ \/\/ create a stat check rectangle\n \/\/ var rectanv = new fabric.Rect({\n \/\/ fill: 'rgba(0, 16, 8, 0.65)',\n \/\/ left: 157,\n \/\/ top: 590,\n \/\/ width: 690,\n \/\/ height: 180,\n \/\/ strokeUniform: true,\n \/\/ centeredScaling: true,\n \/\/ lockMovementX: true,\n \/\/ stroke: 'rgba(255,255,255, 0.50)',\n \/\/ strokeWidth: 0.1,\n \/\/ showWith: 'four',\n \/\/ visible: currentSelection === 'four',\n \/\/ \/\/ rx:15,\n \/\/ \/\/ ry:15,\n \/\/ \/\/ shadow: {\n \/\/ \/\/ color: 'rgba(0, 0, 0, 0.99)',\n \/\/ \/\/ blur: 20,\n \/\/ \/\/ offsetX:0,\n \/\/ \/\/ offsetY:0,\n \/\/ \/\/ \/\/ showWith: 'four',\n \/\/ \/\/ \/\/ visible: currentSelection === 'four'\n \/\/ \/\/ }\n \/\/ });\n \/\/ \/\/\n \/\/ \/\/ adds a stat check rectangle\n \/\/ canvas.add(rectanv);\n \/\/ \/\/ end of stat check rectangle\n\n\n \/\/ Adds editable shunned text1\n canvas.add(new fabric.IText('Shunned\\nYou\\'ve left a poor impression on the\\ncommunity and may be shunned as a\\nresult.', {\n fontFamily: 'monofonto',\n left: 340,\n top: 515,\n fontSize: 20,\n fill: \"#ffb642\",\n objectCaching: false,\n centeredScaling: true,\n lockMovementX: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'four1',\n visible: currentSelection === 'four1',\n lineHeight: 1.4\n }));\n \/\/ end of editable shunned text1\n\n \/\/ Adds editable shunned text2 ok\n canvas.add(new fabric.IText('Caesar\\'s salads', {\n fontFamily: 'monofonto',\n left: 297,\n top: 480,\n fontSize: 18,\n fill: \"#ffb642\",\n centeredScaling: true,\n lockMovementX: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'four1',\n visible: currentSelection === 'four1',\n lineHeight: 1.4\n }));\n \/\/ end of editable shunned text 3 ok\n\n \/\/ Adds editable shunned text3 ok\n canvas.add(new fabric.IText('Ok', {\n fontFamily: 'monofonto',\n left: 490,\n top: 630,\n fontSize: 18,\n fill: \"#ffb642\",\n centeredScaling: true,\n lockMovementX: true,\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'four1',\n visible: currentSelection === 'four1',\n lineHeight: 1.4\n }));\n \/\/ end of editable shunned text 3 ok\n\n \/\/ Adds bottomline on canvas\n var polynv = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: 20\n }, {\n x: 490,\n y: 20\n }, {\n x: 490,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n lockMovementX: true,\n left: 255,\n top: 650,\n showWith: 'four1',\n visible: currentSelection === 'four1',\n });\n \/\/ \"add\" bottomline onto canvas\n canvas.add(polynv);\n\n\n \/\/ adds linear gradient to bottomline\n polynv.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 20,\n colorStops: {\n 0: 'rgba(0,0,0, 0.4)',\n 1: 'rgba(255,182,66, 1.0)'\n }\n });\n \/\/ end of bottomline on canvas\n\n \/\/ Adds topline on canvas\n var polynvtop = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 0,\n y: -20\n }, {\n x: 38,\n y: -20\n }, {\n x: 38,\n y: -20\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n strokeWidth: 3,\n lockMovementX: true,\n left: 255,\n top: 490,\n showWith: 'four1',\n visible: currentSelection === 'four1',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polynvtop);\n\n\n \/\/ adds linear gradient to bottomline\n polynvtop.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 20,\n colorStops: {\n 0: 'rgba(255,182,66, 1.0)',\n 1: 'rgba(0,0,0, 0.4)',\n }\n });\n \/\/ end of bottomline on canvas\n\n \/\/ \"add\" topline onto canvas\n var poly2nv = new fabric.Polyline([{\n x: 0,\n y: -20\n }, {\n x: 0,\n y: -20\n }, {\n x: 310,\n y: -20\n }, {\n x: 310,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'rgba(26,255,129, 1)',\n lockMovementX: true,\n strokeWidth: 3,\n left: 435,\n top: 490,\n showWith: 'four1',\n visible: currentSelection === 'four1',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(poly2nv);\n\n \/\/ vertical linear gradient\n poly2nv.setGradient('stroke', {\n type: 'linear',\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 20,\n colorStops: {\n 0: 'rgba(255,182,66, 1.0)',\n 1: 'rgba(0,0,0, 0.4)'\n }\n });\n\n\n var textbgImg4 = new Image();\n textbgImg4.onload = function(img) {\n var textbg = new fabric.Image(textbgImg, {\n width: 1024,\n height: 256,\n left: 237,\n top: 460,\n scaleX: .52,\n scaleY: .95,\n opacity: 0.80,\n lockMovementX: true,\n showWith: 'four1',\n visible: currentSelection === 'four1',\n crossOrigin: 'anonymous',\n });\n\n canvas.add(textbg);\n canvas.sendToBack(textbg);\n };\n textbgImg4.src = imgURL;\n\n\/\/ ends shunned NV\n\n \/\/ meme maker\n\n \/\/ create a rectangle object for text1\n \/\/ var rectmeme = new fabric.Rect({\n \/\/ fill: 'rgba(255, 255, 255, 1.0)',\n \/\/ left: 0,\n \/\/ top: 750,\n \/\/ width: 1000,\n \/\/ height: 150,\n \/\/ strokeUniform: true,\n \/\/ centeredScaling: true,\n \/\/ lockMovementX: true,\n \/\/ showWith: 'five',\n \/\/ visible: currentSelection === 'five',\n \/\/\n \/\/ });\n \/\/ canvas.add(rectmeme);\n \/\/\n \/\/ var rectmeme1 = new fabric.Rect({\n \/\/ fill: 'rgba(255, 255, 255, 1.0)',\n \/\/ left: 500,\n \/\/ top: 75,\n \/\/ width: 1000,\n \/\/ height: 150,\n \/\/ strokeUniform: true,\n \/\/ centeredScaling: true,\n \/\/ lockMovementX: true,\n \/\/ originX: 'center',\n \/\/ originY: 'center',\n \/\/ showWith: 'five',\n \/\/ visible: currentSelection === 'five',\n \/\/\n \/\/ });\n \/\/\n \/\/\n \/\/ canvas.add(rectmeme1);\n\n \/\/ Adds editable text1\n canvas.add(new fabric.IText('Multiple\\n lines\\n Editable \\n Top \\n text', {\n fontFamily: 'impact',\n left: 140,\n top: 20,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'five',\n visible: currentSelection === 'five',\n\n }));\n\n \/\/ Adds editable text1\n canvas.add(new fabric.IText('Multiple\\n lines\\n Editable \\n bottom \\n text', {\n fontFamily: 'impact',\n left: 140,\n top: 750,\n fontWeight: 800,\n fontSize: 28,\n fill: \"#ffffff\",\n centeredScaling: true,\n showWith: 'five',\n align: 'mid',\n textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n visible: currentSelection === 'five',\n visible: currentSelection === 'five',\n }));\n\n \/\/ stat check 2 ends here -------------------------------------------------------------\n\n \/\/----- quest added starts Here\n\n \/\/ Adds quest text1\n canvas.add(new fabric.IText('Quest added', {\n\n fontFamily: 'monofonto',\n left: 115,\n top: 160,\n fontSize: 22,\n fill: \"#1aff81\",\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'Six',\n visible: currentSelection === 'Six',\n }));\n \/\/end text\n\n \/\/ Adds quest text2\n canvas.add(new fabric.IText('GLITCH IN THE SYSTEM', {\n\n fontFamily: 'Open Sans Condensed',\n left: 115,\n top: 200,\n fontSize: 56,\n fill: \"#1aff81\",\n shadow: 'rgba(0,0,0,0.99) 0px 5px 10px',\n showWith: 'Six',\n visible: currentSelection === 'Six',\n }));\n \/\/end text\n\n \/\/---- quest added ends here\n\n\n \/\/------ quest progression starts Here\n\n\n \/\/ Adds quest text1\n canvas.add(new fabric.IText('\u25a0 COMPLETED: Travel to the\\nlighthouse.\\n\u25a1 Find the assassin and stop him.', {\n\n fontFamily: 'monofonto',\n left: 115,\n top: 160,\n fontSize: 22,\n fill: \"#1aff81\",\n shadow: 'rgba(0,0,0,0.99) 0px 0px 7px',\n showWith: 'seven',\n visible: currentSelection === 'seven',\n }));\n \/\/end text\n\n \/\/----- quest progression ends Here\n\n \/\/ Adds F04 text green\n canvas.add(new fabric.IText('Another settlement has sent word that they need our help.', {\n fontFamily: 'Roboto Condensed',\n left: 200,\n top: 600,\n fontSize: 22,\n fontWeight: 800,\n fill: \"#FFFFFF\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Adds F04 text\n canvas.add(new fabric.IText('Wild revolutionary cowboy', {\n fontFamily: 'Roboto Condensed',\n left: 410,\n top: 572,\n fontSize: 22,\n fontWeight: 800,\n fill: \"#29fd1d\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n canvas.add(new fabric.IText('HP', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 805,\n fontSize: 28,\n fill: \"#29fd1d\",\n fontWeight: 800,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n\n\n\n var polyF4green = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 155,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#29fd1d',\n lockMovementY: true,\n strokeWidth: 10,\n left: 172,\n top: 810,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4green);\n\n var polyF4red = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: -55,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ff5639',\n lockMovementY: true,\n strokeWidth: 10,\n left: 318,\n top: 810,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4red);\n\n polyF4green.setControlsVisibility({\n tl: false, \/\/ middle top disable\n bl: false, \/\/ midle bottom\n tr: false, \/\/ middle left\n br: false, \/\/ I think you get it\n });\n\n polyF4red.setControlsVisibility({\n tl: false, \/\/ middle top disable\n bl: false, \/\/ midle bottom\n tr: false, \/\/ middle left\n br: false, \/\/ I think you get it\n });\n\n var polyF4lower = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 200,\n y: 0\n }, {\n x: 200,\n y: -10\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#29fd1d',\n lockMovementX: true,\n strokeWidth: 3,\n left: 175,\n top: 810,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4lower);\n\n canvas.add(new fabric.IText('AP', {\n fontFamily: 'Roboto Condensed',\n left: 830,\n top: 805,\n fontSize: 28,\n fill: \"#29fd1d\",\n fontWeight: 800,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n var polyF4lowerAP = new fabric.Polyline([{\n x: 0,\n y: -10\n }, {\n x: 0,\n y: 0\n }, {\n x: 200,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#29fd1d',\n lockMovementX: true,\n strokeWidth: 3,\n left: 625,\n top: 810,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4lowerAP);\n\n var polyF4greenAP = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: -155,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#29fd1d',\n lockMovementY: true,\n strokeWidth: 10,\n left: 666,\n top: 810,\n showWith: 'Eight',\n visible: currentSelection === 'Eight',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4greenAP);\n\n polyF4greenAP.setControlsVisibility({\n tl: false, \/\/ middle top disable\n bl: false, \/\/ midle bottom\n tr: false, \/\/ middle left\n br: false, \/\/ I think you get it\n });\n\n\n \/\/------------ FO4 text ends here\n\n \/\/ Adds F04 text green\n canvas.add(new fabric.IText('Another settlement has sent word that they need our help.', {\n fontFamily: 'Roboto Condensed',\n left: 200,\n top: 600,\n fontSize: 22,\n fontWeight: 800,\n fill: \"#FFFFFF\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Adds F04 text\n canvas.add(new fabric.IText('Wild revolutionary cowboy', {\n fontFamily: 'Roboto Condensed',\n left: 410,\n top: 572,\n fontSize: 22,\n fontWeight: 800,\n fill: \"#ecd42b\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n canvas.add(new fabric.IText('HP', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 805,\n fontSize: 28,\n fill: \"#ecd42b\",\n fontWeight: 800,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n\n\n\n var polyF4green = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 155,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementY: true,\n strokeWidth: 10,\n left: 172,\n top: 810,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4green);\n\n var polyF4red = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: -55,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ff5639',\n lockMovementY: true,\n strokeWidth: 10,\n left: 318,\n top: 810,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4red);\n\n polyF4green.setControlsVisibility({\n tl: false, \/\/ middle top disable\n bl: false, \/\/ midle bottom\n tr: false, \/\/ middle left\n br: false, \/\/ I think you get it\n });\n\n polyF4red.setControlsVisibility({\n tl: false, \/\/ middle top disable\n bl: false, \/\/ midle bottom\n tr: false, \/\/ middle left\n br: false, \/\/ I think you get it\n });\n\n var polyF4lower = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 200,\n y: 0\n }, {\n x: 200,\n y: -10\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementX: true,\n strokeWidth: 3,\n left: 175,\n top: 810,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4lower);\n\n canvas.add(new fabric.IText('AP', {\n fontFamily: 'Roboto Condensed',\n left: 830,\n top: 805,\n fontSize: 28,\n fill: \"#ecd42b\",\n fontWeight: 800,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n var polyF4lowerAP = new fabric.Polyline([{\n x: 0,\n y: -10\n }, {\n x: 0,\n y: 0\n }, {\n x: 200,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementX: true,\n strokeWidth: 3,\n left: 625,\n top: 810,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4lowerAP);\n\n var polyF4greenAP = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: -155,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementY: true,\n strokeWidth: 10,\n left: 666,\n top: 810,\n showWith: 'Eight1',\n visible: currentSelection === 'Eight1',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4greenAP);\n\n polyF4greenAP.setControlsVisibility({\n tl: false, \/\/ middle top disable\n bl: false, \/\/ midle bottom\n tr: false, \/\/ middle left\n br: false, \/\/ I think you get it\n });\n\n\n \/\/------------ FO4 text ends here\n\n \/\/---------------F04 quest update green\n\n \/\/ Adds green rectangle object for text1\n var rectfo4 = new fabric.Rect({\n fill: 'rgba(15,46,22, 0.8)',\n left: 140,\n top: 375,\n width: 360,\n height: 30,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine',\n visible: currentSelection === 'Nine',\n });\n\n \/\/ \"add\" rectangle onto canvas\n canvas.add(rectfo4);\n\n \/\/ Adds green rectangle object for text1\n var rectfo41 = new fabric.Rect({\n fill: 'rgba(15,46,22, 0.8)',\n left: 140,\n top: 343,\n width: 360,\n height: 30,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine',\n visible: currentSelection === 'Nine',\n });\n\n \/\/ \"add\" rectangle onto canvas\n canvas.add(rectfo41);\n\n\n \/\/ Adds F04 text\n canvas.add(new fabric.IText(' Go to Valentin\\'\\s Detective Agency', {\n fontFamily: 'Roboto Condensed',\n left: 150,\n top: 350,\n fontSize: 18,\n fontWeight: 400,\n fill: \"#29fd1d\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine',\n visible: currentSelection === 'Nine',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Adds F04 text\n canvas.add(new fabric.IText('\u2714 Completed: Find information about Shaun', {\n fontFamily: 'Roboto Condensed',\n left: 150,\n top: 380,\n fontSize: 18,\n fontWeight: 400,\n fill: \"#29fd1d\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine',\n visible: currentSelection === 'Nine',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Ends adds quest updated Green\n\n \/\/---------------F04 quest update yellow\n\n \/\/ Adds yellow rectangle object for text1\n var rectfo4 = new fabric.Rect({\n fill: 'rgba(75,71,24, 0.8)',\n left: 140,\n top: 375,\n width: 360,\n height: 30,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine1',\n visible: currentSelection === 'Nine1',\n });\n\n \/\/ \"add\" rectangle onto canvas\n canvas.add(rectfo4);\n\n \/\/ Adds yellow rectangle object for text1\n var rectfo41 = new fabric.Rect({\n fill: 'rgba(75,71,24, 0.8)',\n left: 140,\n top: 343,\n width: 360,\n height: 30,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine1',\n visible: currentSelection === 'Nine1',\n });\n\n \/\/ \"add\" rectangle onto canvas\n canvas.add(rectfo41);\n\n\n \/\/ Adds F04 text\n canvas.add(new fabric.IText(' Go to Valentin\\'\\s Detective Agency', {\n fontFamily: 'Roboto Condensed',\n left: 150,\n top: 350,\n fontSize: 18,\n fontWeight: 400,\n fill: \"#ecd42b\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine1',\n visible: currentSelection === 'Nine1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Adds F04 text\n canvas.add(new fabric.IText('\u2714 Completed: Find information about the sheep', {\n fontFamily: 'Roboto Condensed',\n left: 150,\n top: 380,\n fontSize: 18,\n fontWeight: 400,\n fill: \"#ecd42b\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine1',\n visible: currentSelection === 'Nine1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Ends adds quest updated yellow\n\n \/\/---------------F04 quest update green\n\n \/\/ Adds Everybody disliked that green\n\n \/\/ Adds green rectangle object for text1\n var rectfo4 = new fabric.Rect({\n fill: 'rgba(15,46,22, 0.8)',\n left: 135,\n top: 72,\n width: 200,\n height: 33,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine2',\n visible: currentSelection === 'Nine2',\n });\n\n \/\/ \"add\" rectangle onto canvas\n canvas.add(rectfo4);\n\n\n \/\/ Adds F04 text\n canvas.add(new fabric.IText('Everybody disliked that.', {\n fontFamily: 'Roboto Condensed',\n left: 150,\n top: 80,\n fontSize: 18,\n fontWeight: 400,\n fill: \"#29fd1d\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine2',\n visible: currentSelection === 'Nine2',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n var polyF4likedleft = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: -10,\n y: 0\n }, {\n x: -10,\n y: -30\n },{\n x: 0,\n y: -30\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#29fd1d',\n lockMovementX: true,\n strokeWidth: 2,\n left: 135,\n top: 73,\n showWith: 'Nine2',\n visible: currentSelection === 'Nine2',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4likedleft);\n\n var polyF4likedright = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 10,\n y: 0\n }, {\n x: 10,\n y: -30\n },{\n x: 0,\n y: -30\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#29fd1d',\n lockMovementX: true,\n strokeWidth: 2,\n left: 323,\n top: 73,\n showWith: 'Nine2',\n visible: currentSelection === 'Nine2',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4likedright);\n\n \/\/ Ends adds Everybody disliked that Green\n\n \/\/ Adds Everybody disliked that yellow\n\n \/\/ Adds green rectangle object for text1\n var rectfo4 = new fabric.Rect({\n fill: 'rgba(75,71,24, 0.8)',\n left: 135,\n top: 72,\n width: 200,\n height: 33,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine3',\n visible: currentSelection === 'Nine3',\n });\n\n \/\/ \"add\" rectangle onto canvas\n canvas.add(rectfo4);\n\n\n \/\/ Adds F04 text\n canvas.add(new fabric.IText('Everybody disliked that.', {\n fontFamily: 'Roboto Condensed',\n left: 150,\n top: 80,\n fontSize: 18,\n fontWeight: 400,\n fill: \"#ecd42b\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Nine3',\n visible: currentSelection === 'Nine3',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n var polyF4likedleft = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: -10,\n y: 0\n }, {\n x: -10,\n y: -30\n },{\n x: 0,\n y: -30\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementX: true,\n strokeWidth: 2,\n left: 135,\n top: 73,\n showWith: 'Nine3',\n visible: currentSelection === 'Nine3',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4likedleft);\n\n var polyF4likedright = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 10,\n y: 0\n }, {\n x: 10,\n y: -30\n },{\n x: 0,\n y: -30\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementX: true,\n strokeWidth: 2,\n left: 323,\n top: 73,\n showWith: 'Nine3',\n visible: currentSelection === 'Nine3',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4likedright);\n\n \/\/ Ends adds Everybody disliked that yellow\n\n \/\/ Adds Location discovered F04 green\n canvas.add(new fabric.IText('Discovered', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 400,\n fontSize: 20,\n fontWeight: 400,\n fill: \"#29fd1d\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Ten',\n visible: currentSelection === 'Ten',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Adds Location text f04 green\n canvas.add(new fabric.IText('BOSTON PUBLIC LIBRARY', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 425,\n fontSize: 44,\n fontWeight: 800,\n fill: \"#29fd1d\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Ten',\n visible: currentSelection === 'Ten',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds Location discovered F04 yellow\n canvas.add(new fabric.IText('Discovered', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 400,\n fontSize: 20,\n fontWeight: 400,\n fill: \"#ecd42b\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Ten1',\n visible: currentSelection === 'Ten1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Adds Location text f04 yellow\n canvas.add(new fabric.IText('BOSTON PUBLIC LIBRARY', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 425,\n fontSize: 44,\n fontWeight: 800,\n fill: \"#ecd42b\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Ten1',\n visible: currentSelection === 'Ten1',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/adds XP text and lines green\n\n var polyF4lowerXP = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 200,\n y: 0\n }, {\n x: 200,\n y: -10\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#29fd1d',\n lockMovementX: true,\n strokeWidth: 3,\n left: 175,\n top: 510,\n showWith: 'Eleven',\n visible: currentSelection === 'Eleven',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4lowerXP);\n\n canvas.add(new fabric.IText('XP', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 505,\n fontSize: 28,\n fill: \"#29fd1d\",\n fontWeight: 800,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eleven',\n visible: currentSelection === 'Eleven',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n var polyF4greenXP = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 155,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#29fd1d',\n lockMovementY: true,\n strokeWidth: 10,\n left: 172,\n top: 510,\n showWith: 'Eleven',\n visible: currentSelection === 'Eleven',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4greenXP);\n\n polyF4greenXP.setControlsVisibility({\n tl: false, \/\/ middle top disable\n bl: false, \/\/ midle bottom\n tr: false, \/\/ middle left\n br: false, \/\/ I think you get it\n });\n\n \/\/ Adds XP amount text\n canvas.add(new fabric.IText('+ 0023', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 476,\n fontSize: 32,\n fontWeight: 400,\n fill: \"#29fd1d\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eleven',\n visible: currentSelection === 'Eleven',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n\n \/\/adds XP text and lines yellow\n\n var polyF4lowerXP = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 200,\n y: 0\n }, {\n x: 200,\n y: -10\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementX: true,\n strokeWidth: 3,\n left: 175,\n top: 510,\n showWith: 'Eleven1',\n visible: currentSelection === 'Eleven1',\n shadow: 'rgba(0,0,0,0.99) 2px 2px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4lowerXP);\n\n canvas.add(new fabric.IText('XP', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 505,\n fontSize: 28,\n fill: \"#ecd42b\",\n fontWeight: 800,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eleven1',\n visible: currentSelection === 'Eleven1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n var polyF4greenXP = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 155,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementY: true,\n strokeWidth: 10,\n left: 172,\n top: 510,\n showWith: 'Eleven1',\n visible: currentSelection === 'Eleven1',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4greenXP);\n\n polyF4greenXP.setControlsVisibility({\n tl: false, \/\/ middle top disable\n bl: false, \/\/ midle bottom\n tr: false, \/\/ middle left\n br: false, \/\/ I think you get it\n });\n\n \/\/ Adds XP amount text\n canvas.add(new fabric.IText('+ 0023', {\n fontFamily: 'Roboto Condensed',\n left: 136,\n top: 476,\n fontSize: 32,\n fontWeight: 400,\n fill: \"#ecd42b\",\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Eleven1',\n visible: currentSelection === 'Eleven1',\n shadow: 'rgba(0,0,0,0.99) 3px 2px 2px',\n }));\n\n \/\/ Adds enemy red text\n\n var polyF4redEnemy1 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 100,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'hsl(8, 100%, 30%)',\n lockMovementY: true,\n strokeWidth: 10,\n left: 500,\n top: 80,\n showWith: 'Twelve',\n visible: currentSelection === 'Twelve',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4redEnemy1);\n\n var polyF4lowerEnemy = new fabric.Polyline([{\n x: 0,\n y: -10\n }, {\n x: 0,\n y: 0\n }, {\n x: 250,\n y: 0\n }, {\n x: 250,\n y: -10\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ff5639',\n lockMovementX: true,\n strokeWidth: 2,\n left: 390,\n top: 79,\n showWith: 'Twelve',\n visible: currentSelection === 'Twelve',\n shadow: 'rgba(0,0,0,0.99) 1px 1px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4lowerEnemy);\n\n var polyF4redEnemy = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 155,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ff5639',\n lockMovementY: true,\n strokeWidth: 10,\n left: 385,\n top: 80,\n showWith: 'Twelve',\n visible: currentSelection === 'Twelve',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4redEnemy);\n\n \/\/ Adds Enemy text title text f04\n canvas.add(new fabric.IText('ZOMBIE STALKER', {\n fontFamily: 'Roboto Condensed',\n left: 385,\n top: 53,\n fontSize: 26,\n fontWeight: 800,\n fill: \"#ff5639\",\n centeredScaling: true,\n lockMovementY: true,\n showWith: 'Twelve',\n visible: currentSelection === 'Twelve',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/-- end of red enemy text\n\n \/\/ Adds Ally yellow text\n\n var polyF4Ally1 = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 100,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: 'hsl(55, 100%, 30%)',\n lockMovementY: true,\n strokeWidth: 10,\n left: 500,\n top: 80,\n showWith: 'Twelve1',\n visible: currentSelection === 'Twelve1',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4Ally1);\n\n var polyF4lowerAlly = new fabric.Polyline([{\n x: 0,\n y: -10\n }, {\n x: 0,\n y: 0\n }, {\n x: 250,\n y: 0\n }, {\n x: 250,\n y: -10\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementX: true,\n strokeWidth: 2,\n left: 390,\n top: 79,\n showWith: 'Twelve1',\n visible: currentSelection === 'Twelve1',\n shadow: 'rgba(0,0,0,0.99) 1px 1px 1px',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4lowerAlly);\n\n var polyF4Ally = new fabric.Polyline([{\n x: 0,\n y: 0\n }, {\n x: 155,\n y: 0\n }, ], {\n fill: 'rgba(0, 16, 8, 0.00)',\n stroke: '#ecd42b',\n lockMovementY: true,\n strokeWidth: 10,\n left: 385,\n top: 80,\n showWith: 'Twelve1',\n visible: currentSelection === 'Twelve1',\n });\n \/\/ \"add\" topline onto canvas\n canvas.add(polyF4Ally);\n\n \/\/ Adds Enemy text title text f04\n canvas.add(new fabric.IText('Caitlyn', {\n fontFamily: 'Roboto Condensed',\n left: 385,\n top: 53,\n fontSize: 26,\n fontWeight: 800,\n fill: \"#ecd42b\",\n centeredScaling: true,\n lockMovementY: true,\n showWith: 'Twelve1',\n visible: currentSelection === 'Twelve1',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/-- end of Ally yellow text\n\n \/\/meme maker 1\n\n \/\/ create a rectangle object for meme maker\n var rect13 = new fabric.Rect({\n fill: 'rgba(255, 255, 255, 1.0)',\n left: 0,\n top: 0,\n width: 1000,\n height: 905,\n strokeUniform: true,\n centeredScaling: true,\n selectable: false,\n showWith: 'thirteen',\n visible: currentSelection === 'thirteen',\n\n });\n canvas.add(rect13);\n\n\n\n \/\/ Adds Enemy text title for meme maker\n canvas.add(new fabric.IText('Top editable text - example: \\n Me doing, something i\\'\\m perfectly capable \\of\\ and have done before \\n but someone decides to watch.', {\n fontFamily: 'impact',\n left: 100,\n top: 30,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n \/\/ textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'thirteen',\n visible: currentSelection === 'thirteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds Enemy text title for meme maker\n canvas.add(new fabric.IText('Drag image from PC to here and delete this text \\n (you may need to drag twice) ', {\n fontFamily: 'impact',\n left: 140,\n top: 520,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'thirteen',\n visible: currentSelection === 'thirteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ meme maker 2\n\n \/\/ create a rectangle object for meme maker\n var rect18 = new fabric.Rect({\n fill: 'rgba(255, 255, 255, 1.0)',\n left: 0,\n top: 0,\n width: 1000,\n height: 905,\n strokeUniform: true,\n centeredScaling: true,\n selectable: false,\n showWith: 'Fourteen',\n visible: currentSelection === 'Fourteen',\n\n });\n canvas.add(rect18);\n\n \/\/ create a rectangle object for meme maker\n var rect19 = new fabric.Rect({\n fill: 'rgba(0, 0, 0, 1)',\n left: 495,\n top: 0,\n width: 10,\n height: 905,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Fourteen',\n visible: currentSelection === 'Fourteen',\n\n });\n canvas.add(rect19);\n\n \/\/ create a rectangle object for meme maker\n var rect20 = new fabric.Rect({\n fill: 'rgba(0, 0, 0, 1)',\n left: 0,\n top: 445,\n width: 1000,\n height: 10,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Fourteen',\n visible: currentSelection === 'Fourteen',\n\n });\n canvas.add(rect20);\n\n \/\/ Adds text 1 for meme maker\n canvas.add(new fabric.IText('Top editable text - example: \\n 1.', {\n fontFamily: 'impact',\n left: 10,\n top: 10,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n \/\/ textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fourteen',\n visible: currentSelection === 'Fourteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds text 2 for meme maker\n canvas.add(new fabric.IText('Top editable text - example: \\n 2.', {\n fontFamily: 'impact',\n left: 520,\n top: 10,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n \/\/ textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fourteen',\n visible: currentSelection === 'Fourteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds text 3 meme maker\n canvas.add(new fabric.IText('Bottom editable text - example: \\n 3.', {\n fontFamily: 'impact',\n left: 10,\n top: 470,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n \/\/ textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fourteen',\n visible: currentSelection === 'Fourteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds text 4 meme maker\n canvas.add(new fabric.IText('Bottom editable text - example: \\n 4.', {\n fontFamily: 'impact',\n left: 520,\n top: 470,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n \/\/ align: 'mid',\n \/\/ textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fourteen',\n visible: currentSelection === 'Fourteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/meme maker 3\n\n \/\/ create a rectangle object for meme maker\n var rect14 = new fabric.Rect({\n fill: 'rgba(255, 255, 255, 1.0)',\n left: 0,\n top: 0,\n width: 1000,\n height: 905,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n lockMovementy: true,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n\n });\n canvas.add(rect14);\n\n \/\/ create a rectangle object for meme maker\n var rect15 = new fabric.Rect({\n fill: 'rgba(0, 0, 0, 1)',\n left: 495,\n top: 0,\n width: 10,\n height: 905,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n\n });\n canvas.add(rect15);\n\n \/\/ create a rectangle object for meme maker\n var rect16 = new fabric.Rect({\n fill: 'rgba(0, 0, 0, 1)',\n left: 0,\n top: 300,\n width: 1000,\n height: 10,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n\n });\n canvas.add(rect16);\n\n \/\/ create a rectangle object for meme maker\n var rect17 = new fabric.Rect({\n fill: 'rgba(0, 0, 0, 1)',\n left: 0,\n top: 600,\n width: 1000,\n height: 10,\n strokeUniform: true,\n centeredScaling: true,\n lockMovementX: true,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n\n });\n canvas.add(rect17);\n\n \/\/ Adds text 1 for meme maker\n canvas.add(new fabric.IText('Top editable text - example: \\n 1.', {\n fontFamily: 'impact',\n left: 10,\n top: 10,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n \/\/ textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds text 2 for meme maker\n canvas.add(new fabric.IText('Top editable text - example: \\n 2.', {\n fontFamily: 'impact',\n left: 520,\n top: 10,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n \/\/ textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds text 3 for meme maker\n canvas.add(new fabric.IText('Editable text - example: \\n 3.', {\n fontFamily: 'impact',\n left: 10,\n top: 320,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds text 4 for meme maker\n canvas.add(new fabric.IText('Editable text - example: \\n 4.', {\n fontFamily: 'impact',\n left: 520,\n top: 320,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds text 5 for meme maker\n canvas.add(new fabric.IText('Editable text - example: \\n 5.', {\n fontFamily: 'impact',\n left: 10,\n top: 620,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n \/\/ Adds text 6 for meme maker\n canvas.add(new fabric.IText('Editable text - example: \\n 6.', {\n fontFamily: 'impact',\n left: 520,\n top: 620,\n fontSize: 28,\n fontWeight: 800,\n fill: \"#ffffff\",\n centeredScaling: true,\n align: 'mid',\n textAlign: 'center',\n stroke: '#000',\n strokeWidth: 0.8,\n showWith: 'Fifteen',\n visible: currentSelection === 'Fifteen',\n shadow: 'rgba(0,0,0,0.99) 1px 2px 2px',\n }));\n\n\n \/\/-------------------Adds Text selectable color picker\n\n var selectedColorHex = \"#1aff81\";\n\n $(\"#toggle\").spectrum({\n showPaletteOnly: false,\n showPalette: true,\n showSelectionPalette: false,\n clickoutFiresChange: true,\n \/\/ color: 'black',\n showAlpha: true,\n allowEmpty:true,\n showInitial: true,\n showInput: true,\n hideAfterPaletteSelect: true,\n palette: [\n ['#1aff81'], \/\/green fallout 3\n ['#ffb642'], \/\/yellow new vegas\n ['#2ecfff'], \/\/blue in new vegas\n ['#c0ffff'], \/\/blue in new vegas\n ['#000000'], \/\/black text\n ['#ffffff'], \/\/White text\n ['#29fd1d'], \/\/Green fallout 4\n ['#ecd42b'], \/\/Yellow fallout 4\n ['#ff5639'] \/\/Red fallout 4\n\n ],\n \/\/change text color\n change: function(selectedColor) {\n \/\/$(\"#colorValue\").val(selectedColor);\n selectedColorHex = selectedColor.toRgbString();\n if (canvas.freeDrawingBrush) {\n canvas.freeDrawingBrush.color = selectedColorHex;\n }\n changeSelectionColor(selectedColorHex);\n $(\"#colorPalette\").css(\"color\", selectedColorHex);\n }\n });\n\n\n $(\"#btn-toggle\").click(function() {\n $(\"#toggle\").spectrum(\"toggle\");\n return false;\n });\n\n var changeSelectionColor = function(color) {\n \/\/ check if a single object is selected\n var selectedObject = canvas.getActiveObject();\n if (selectedObject) {\n changeObjectColor(selectedObject, color);\n canvas.renderAll();\n return;\n }\n\n \/\/check if multiple objects are selected\n var selectedGroup = canvas.getActiveGroup();\n if (selectedGroup) {\n for (i = 0; i < selectedGroup._objects.length; i++) {\n changeObjectColor(selectedGroup._objects[i], color);\n }\n canvas.renderAll();\n }\n }\n\n var changeObjectColor = function(object, color) {\n if (object instanceof fabric.IText) {\n object.setColor(color);\n }\n if (object instanceof fabric.Polyline) {\n object.set(\"stroke\", color);\n }\n if (object instanceof fabric.Rect) {\n object.set(\"fill\", color);\n }\n }\n\n canvas.on('object:added', function(e) {\n changeObjectColor(e.target, selectedColorHex);\n });\n\n\n \/\/ Adds background to canvas on click of fileUpload id\n document.getElementById('fileUpload').addEventListener(\"change\", function(e) {\n\n var file = e.target.files[0];\n\n\n\n \/\/ Read the File objects in this FileList.\n var reader = new FileReader();\n \/\/ listener for the onload event\n reader.onload = function(f) {\n \/\/create data element\n var data = f.target.result;\n fabric.Image.fromURL(data, function(img) {\n \/\/ add background image\n {\n bgImage = img;\n scaleAndPositionImage();\n };\n \/\/ put image on canvas\n canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {\n crossOrigin: 'anonymous',\n\n });\n document.querySelector('#b').onclick = () => {\n canvas.setWidth(img.getScaledWidth())\n canvas.setHeight(img.getScaledHeight())\n img.set({\n left: 0,\n top: 0\n })\n img.setCoords()\n canvas.requestRenderAll()\n }\n });\n };\n reader.readAsDataURL(file);\n });\n\n\n\n \/\/\/ saves image background, rect, textC\n var imageSaver = document.getElementById('lnkDownload');\n imageSaver.addEventListener('click', saveImage, false);\n\n function saveImage(e) {\n this.href = canvas.toDataURL({\n format: 'png',\n crossOrigin: 'anonymous',\n quality: 1.0\n });\n this.download = 'custom.png'\n }\n \/\/ends image saving\n\n\n \/\/---------------change layers\n\n \/\/change layer buttons\n \/\/ document.getElementById(\"blb\").onclick = function() {\n \/\/ changeLayer(\"sendToBack\");\n \/\/ };\n \/\/ document.getElementById(\"bld\").onclick = function() {\n \/\/ changeLayer(\"sendBackwards\");\n \/\/ };\n \/\/ document.getElementById(\"blu\").onclick = function() {\n \/\/ changeLayer(\"bringForward\");\n \/\/ };\n \/\/ document.getElementById(\"blt\").onclick = function() {\n \/\/ changeLayer(\"bringToFront\");\n \/\/ };\n\n \/\/ starts copy-paste featuer\n\n\n function Copy() {\n \/\/ clone what are you copying since you\n \/\/ may want copy and paste on different moment.\n \/\/ and you do not want the changes happened\n \/\/ later to reflect on the copy.\n canvas.getActiveObject().clone(function(cloned) {\n _clipboard = cloned;\n });\n }\n\n function Paste() {\n \/\/ clone again, so you can do multiple copies.\n _clipboard.clone(function(clonedObj) {\n canvas.discardActiveObject();\n clonedObj.set({\n left: clonedObj.left + 10,\n top: clonedObj.top + 10,\n evented: true,\n });\n if (clonedObj.type === 'activeSelection') {\n \/\/ active selection needs a reference to the canvas.\n clonedObj.canvas = canvas;\n clonedObj.forEachObject(function(obj) {\n canvas.add(obj);\n });\n \/\/ this should solve the unselectability\n clonedObj.setCoords();\n } else {\n canvas.add(clonedObj);\n }\n _clipboard.top += 10;\n _clipboard.left += 10;\n canvas.setActiveObject(clonedObj);\n canvas.requestRenderAll();\n });\n }\n\n\n \/\/ End of copy-paste feature\n\n \/\/ freaky experimental stuff\n\n \/\/\n \/\/ var canvas = new fabric.Canvas('canvas');\n \/\/ var polygonCount = 1;\n \/\/ var startDrawingPolygon;\n \/\/ var ArrayLength;\n \/\/ var addTexture = false;\n \/\/ var circleCount = 1;\n \/\/ var fillColor = \"rgba(46, 240, 56, 0.5)\";\n \/\/\n \/\/ function done() {\n \/\/ startDrawingPolygon = false;\n \/\/ ArrayLength = circleCount;\n \/\/ circleCount = 1;\n \/\/ var tempCount = 0;\n \/\/ var objects = canvas.getObjects();\n \/\/ var points = [];\n \/\/ for (var i = 0; objects.length > i; i++) {\n \/\/ if (objects[i].polygonNo === polygonCount) {\n \/\/ points.push({\n \/\/ x: objects[i].left,\n \/\/ y: objects[i].top\n \/\/ });\n \/\/ canvas.renderAll();\n \/\/ }\n \/\/ }\n \/\/ console.log(points)\n \/\/ window[\"polygon\" + polygonCount] = new fabric.Polygon(points, {\n \/\/ fill: fillColor,\n \/\/ PolygonNumber: polygonCount,\n \/\/ name: \"Polygon\",\n \/\/ selectable: false,\n \/\/ noofcircles: ArrayLength,\n \/\/ objectCaching: false\n \/\/ });\n \/\/ canvas.add(window[\"polygon\" + polygonCount]);\n \/\/ canvas.sendToBack(window[\"polygon\" + polygonCount])\n \/\/ canvas.renderAll();\n \/\/ polygonCount++;\n \/\/ }\n \/\/\n \/\/ function Addpolygon() {\n \/\/ startDrawingPolygon = true;\n \/\/ }\n \/\/\n \/\/ canvas.on('object:moving', function(option) {\n \/\/ var object = option.target;\n \/\/ canvas.forEachObject(function(obj) {\n \/\/ if (obj.name == \"Polygon\") {\n \/\/ if (obj.PolygonNumber == object.polygonNo) {\n \/\/ var points = window[\"polygon\" + object.polygonNo].get(\"points\");\n \/\/ points[object.circleNo - 1].x = object.left;\n \/\/ points[object.circleNo - 1].y = object.top;\n \/\/ window[\"polygon\" + object.polygonNo].set({\n \/\/ points: points\n \/\/ });\n \/\/ }\n \/\/ }\n \/\/ })\n \/\/ canvas.renderAll();\n \/\/ });\n \/\/\n \/\/ canvas.on('mouse:down', function(option) {\n \/\/\n \/\/ if (option.target && option.target.name == \"draggableCircle\") {\n \/\/ return;\n \/\/ } else {\n \/\/ if (addTexture) {\n \/\/ console.log(option);\n \/\/ }\n \/\/ if (startDrawingPolygon) {\n \/\/ var pointer = canvas.getPointer(option.e);\n \/\/ circle = new fabric.Circle({\n \/\/ left: pointer.x,\n \/\/ top: pointer.y,\n \/\/ radius: 7,\n \/\/ hasBorders: false,\n \/\/ hasControls: false,\n \/\/ polygonNo: polygonCount,\n \/\/ name: \"draggableCircle\",\n \/\/ circleNo: circleCount,\n \/\/ fill: \"rgba(0, 0, 0, 0.5)\",\n \/\/ hasRotatingPoint: false,\n \/\/ originX: 'center',\n \/\/ originY: 'center'\n \/\/ });\n \/\/ canvas.add(circle);\n \/\/ circleCount++;\n \/\/ }\n \/\/ }\n \/\/ });\n \/\/ end of freaky experimental stuff\n\n \/\/\/ tablinks\n function openCity(evt, cityName) {\n var i, tabcontent, tablinks;\n tabcontent = document.getElementsByClassName(\"tabcontent\");\n for (i = 0; i < tabcontent.length; i++) {\n tabcontent[i].style.display = \"none\";\n }\n tablinks = document.getElementsByClassName(\"tablinks\");\n for (i = 0; i < tablinks.length; i++) {\n tablinks[i].className = tablinks[i].className.replace(\" active\", \"\");\n }\n document.getElementById(cityName).style.display = \"block\";\n evt.currentTarget.className += \" active\";\n }\n\n $('button[class=\"tablinks\"]').trigger('click'); \/\/ Triggers a click on LockMovementX\n\n<\/script>\n\n\n<style media=\"screen\">\n\n@font-face {\n font-family: \"monofonto\";\n src: url(\"fonts\/monofonto-webfont.ttf\"),\n url(\"fonts\/monofonto-webfont.woff\"),\n url(\"fonts\/monofonto-webfont.woff2\");\n\n}\n\n@font-face {\n font-family: \"Fixedsys Excelsior 3.01\";\n src:\n url(\"fonts\/FSEX300.ttf\");\n}\n\n@font-face {\n font-family: \"Jost*\";\n src:\n url(\"fonts\/Jost-500-Medium.ttf\");\n}\n\n@font-face {\n font-family: \"FreeSans\";\n src:\n url(\"fonts\/freesans.ttf\");\n}\n\n@font-face {\n font-family: \"Open Sans Condensed\";\n src:\n url(\"fonts\/OpenSansCondensed-Bold.ttf\");\n}\n\n body {\n background: #20262E;\n padding-top: 5px;\n font-family: \"Helvetica\", \"Roboto\";\n line-height: 1;\n }\n\n div {\n \/* background-color:rgb(40, 44, 52); afecta el selector de color *\/\n \/* display: inline-block; *\/\n float: left;\n color: #FFFFFF;\n font-size: 90%;\n background-image: url(\/fonts\/bgnoise.png);\n }\n\n .header {\n width: 728px;\n height: 90px;\n border: 5px solid black;\n position: relative;\n display: inline-block;\n }\n\n\n #canvas-container {\n border: 1px solid black;\n \/* display: block; *\/\n }\n\n #upandsave {\n \/* display: inline-block; *\/\n width: 25%;\n padding: 5px;\n padding-left: 15px;\n padding-right: 10px;\n padding-Top: 5px;\n font-size: 110%;\n background-image: url(\/fonts\/bgmetal.png);\n border: 5px solid black;\n }\n\n #sliders {\n width: 25%;\n \/* background-image: url(\/fonts\/bgnoise.png); *\/\n background-image: url(\/fonts\/bgmetal.png);\n \/* background-size: cover; *\/\n background-color: rgba(198, 193, 190, 0.75);\n padding-top: 10px;\n padding-left: 15px;\n padding-right: 10px;\n padding-bottom: 15px;\n border: 5px solid black;\n }\n\n #London {\n width: 25%;\n \/* background-image: url(\/fonts\/bgnoise.png); *\/\n background-image: url(\/fonts\/bgmetal.png);\n \/* background-size: cover; *\/\n background-color: rgba(198, 193, 190, 0.75);\n padding-top: 0px;\n padding-left: 15px;\n padding-right: 10px;\n padding-bottom: 5px;\n border: 5px solid black;\n }\n\n #London button {\n margin-left: 5px;\n }\n\n #Paris {\n width: 25%;\n \/* background-image: url(\/fonts\/bgnoise.png); *\/\n background-image: url(\/fonts\/bgmetal.png);\n \/* background-size: cover; *\/\n background-color: rgba(198, 193, 190, 0.75);\n padding-top: 10px;\n padding-left: 15px;\n padding-right: 10px;\n padding-bottom: 15px;\n border: 5px solid black;\n }\n\n #Spain {\n width: 25%;\n \/* background-image: url(\/fonts\/bgnoise.png); *\/\n background-image: url(\/fonts\/bgmetal.png);\n \/* background-size: cover; *\/\n background-color: rgba(198, 193, 190, 0.75);\n padding-top: 0px;\n padding-left: 15px;\n padding-right: 10px;\n padding-bottom: 5px;\n border: 5px solid black;\n }\n\n #footer {\n width: 300px;\n height: 250px;\n border: 5px solid black;\n top:85%;\n display: inline-block;\n }\n\n\n #invisiblebox { background-image: url(\"\");\n inline-block;\n }\n\n \/* Style the tab *\/\n .tab {\n display:inline;\n width: 25%;\n padding-top: 1px;\n padding-left: 15px;\n padding-right: 10px;\n padding-bottom: 9px;\n border: 5px solid black;\n \/* position: relative; *\/\n \/* overflow: hidden; *\/\n background-image: url(\/fonts\/bgmetal.png);\n background-color: #f1f1f1;\n }\n\n .mainbox {\n width: 26%;\n display: inline;\n }\n\n \/* Style the buttons inside the tab *\/\n .tab button {\n background-color: inherit;\n float: left;\n outline: none;\n cursor: pointer;\n padding: 5px;\n margin-left: 5px;\n margin-right: 5px;\n margin-bottom: 2px;\n transition: 0.3s;\n font-size: 17px;\n\n }\n\n \/* Change background color of buttons on hover *\/\n .tab button:hover {\n background-color: #ddd;\n }\n\n \/* Create an active\/current tablink class *\/\n .tab button.active {\n background-color: #ccc;\n }\n\n .tablinks {\n padding-left: 5px;\n padding-right: 5px;\n\n }\n\n \/* Style the tab content *\/\n .tabcontent {\n display: none;\n padding: 6px 12px;\n border: 1px solid #ccc;\n border-top: none;\n width: 30%;\n }\n\n \/* input#visible {float: left;} *\/\n\n p,\n ol,\n ul,\n input,\n button,\n select,\n a {\n float: none;\n margin: 0px;\n padding-left: 5px;\n display: inline-block;\n font-family: 'Jost*', \"Futura\", \"Roboto\";\n }\n\n ol,\n ul,\n a,\n button {\n padding-left: 5px;\n }\n\n li {\n margin: 8px;\n }\n\n p {\n\n }\n\n \/* input, *\/\n button,\n .mdi_mdi-format-text {\n display: inline-block;\n font-family: 'Jost*', \"Roboto\";\n font-size: 14px;\n cursor: pointer;\n color: #ffffff;\n font-weight: bold;\n padding: 5px 10px;\n text-decoration: none;\n text-shadow: 0px 1px 0px #263666;\n background-size: cover;\n background-color: rgba(129, 106, 24, 0.9);\n\n border-radius: 1px;\n border: 5px solid black;\n border-image: url(\"\/fonts\/button.png\") 30;\n -webkit-border-radius: 3px;\n \/* makes round corners *\/\n\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(158, 46, 71, 0.8),\n inset -400px 10px 1px 20px rgba(255, 1, 77, 0.9);\n Filter: blur(0.3px);\n\n \/* -webkit-transition: -webkit-box-shadow .05s ease-in-out; *\/\n }\n\n .mdi_mdi-format-text1 {\n display: inline-block;\n font-family: 'Jost*', \"Roboto\";\n font-size: 14px;\n cursor: pointer;\n color: #ffffff;\n font-weight: bold;\n padding: 5px 15px;\n text-decoration: none;\n text-shadow: 0px 1px 0px #263666;\n background-size: cover;\n background-color: rgba(129, 106, 24, 0.9);\n -moz-border-radius: 1px;\n\n border-radius: 1px;\n border: 5px solid black;\n border-image: url(\"\/fonts\/button.png\") 30;\n -webkit-border-radius: 3px;\n \/* makes round corners *\/\n\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(46, 158, 151, 0.8),\n inset -400px 10px 1px 20px rgba(1, 225, 255, 0.9);\n Filter: blur(0.3px);\n\n \/* -webkit-transition: -webkit-box-shadow .05s ease-in-out; *\/\n }\n\n .mdi_mdi-format-text-green {\n display: inline-block;\n font-family: 'Jost*', \"Roboto\";\n font-size: 14px;\n cursor: pointer;\n color: #ffffff;\n font-weight: bold;\n padding: 5px 15px;\n text-decoration: none;\n text-shadow: 0px 1px 0px #263666;\n background-size: cover;\n background-color: rgba(129, 106, 24, 0.9);\n -moz-border-radius: 1px;\n\n border-radius: 1px;\n border: 5px solid black;\n border-image: url(\"\/fonts\/button.png\") 30;\n -webkit-border-radius: 3px;\n \/* makes round corners *\/\n\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(58, 158, 46, 0.8),\n inset -400px 10px 1px 20px rgba(1, 255, 42, 0.9);\n Filter: blur(0.3px);\n}\n .mdi_mdi-format-text-yellow {\n display: inline-block;\n font-family: 'Jost*', \"Roboto\";\n font-size: 14px;\n cursor: pointer;\n color: #ffffff;\n font-weight: bold;\n padding: 5px 15px;\n text-decoration: none;\n text-shadow: 0px 1px 0px #263666;\n background-size: cover;\n background-color: rgba(129, 106, 24, 0.9);\n -moz-border-radius: 1px;\n\n border-radius: 1px;\n border: 5px solid black;\n border-image: url(\"\/fonts\/button.png\") 30;\n -webkit-border-radius: 3px;\n \/* makes round corners *\/\n\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(158, 150, 46, 0.8),\n inset -400px 10px 1px 20px rgba(235, 255, 1, 0.9);\n Filter: blur(0.3px);\n \/* -webkit-transition: -webkit-box-shadow .05s ease-in-out; *\/\n }\n\n .mdi_mdi-format-text-white {\n display: inline-block;\n font-family: 'Jost*', \"Roboto\";\n font-size: 14px;\n cursor: pointer;\n color: #ffffff;\n font-weight: bold;\n padding: 5px 15px;\n text-decoration: none;\n text-shadow: 0px 1px 0px #263666;\n background-size: cover;\n background-color: rgba(129, 106, 24, 0.9);\n -moz-border-radius: 1px;\n\n border-radius: 1px;\n border: 5px solid black;\n border-image: url(\"\/fonts\/button.png\") 30;\n -webkit-border-radius: 3px;\n \/* makes round corners *\/\n\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(181, 179, 154, 0.8),\n inset -400px 10px 1px 20px rgba(254, 249, 183, 0.9);\n Filter: blur(0.3px);\n \/* -webkit-transition: -webkit-box-shadow .05s ease-in-out; *\/\n}\n\n.mdi_mdi-format-text-black {\n display: inline-block;\n font-family: 'Jost*', \"Roboto\";\n font-size: 14px;\n cursor: pointer;\n color: #ffffff;\n font-weight: bold;\n padding: 5px 15px;\n text-decoration: none;\n text-shadow: 0px 1px 0px #263666;\n background-size: cover;\n background-color: rgba(129, 106, 24, 0.9);\n -moz-border-radius: 1px;\n\n border-radius: 1px;\n border: 5px solid black;\n border-image: url(\"\/fonts\/button.png\") 30;\n -webkit-border-radius: 3px;\n \/* makes round corners *\/\n\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(115, 113, 98, 0.8),\n inset -400px 10px 1px 20px rgba(50, 49, 38, 0.9);\n Filter: blur(0.3px);\n\/* -webkit-transition: -webkit-box-shadow .05s ease-in-out; *\/\n}\n\n button:hover,\n input:hover,\n .mdi_mdi-format-text:hover,\n .mdi_mdi-format-text-green:hover,\n .mdi_mdi-format-text-yellow:hover,\n .mdi_mdi-format-text-white:hover,\n .mdi_mdi-format-text-black:hover {\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(158, 150, 46, 0.8),\n inset -400px 10px 1px 20px rgba(255, 146, 1, 0.9);\n }\n\n button:active,\n \/* input:active, *\/\n .mdi_mdi-format-text:active,\n .mdi_mdi-format-text1:active {\n position: relative;\n \/* top: 1px; *\/\n -webkit-transform: translate(0, 9px);\n \/* depth of button press *\/\n\n -webkit-box-shadow:\n\n 0px 0px 0px 0px rgba(128, 128, 128, .6);\n \/* shadow *\/\n background-color: #0688fa;\n }\n\n\n a#lnkDownload {\n display: inline-block;\n border: 1px solid red;\n background-color: deepskyblue;\n color: #ffffff;\n text-shadow: 1px 1px #000000;\n margin-top: 5px;\n margin-bottom: 10px;\n padding: 5px;\n border-radius: 1px;\n border: 5px solid black;\n border-image: url(\"\/fonts\/button.png\") 30;\n -webkit-border-radius: 3px;\n \/* makes round corners *\/\n\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(46, 158, 151, 0.8),\n inset -400px 10px 1px 20px rgba(1, 225, 255, 0.9);\n Filter: blur(0.3px);\n }\n\n #lnkDownload:hover, {\n\n background-color: green;\n }\n\n a#lnkDownload:active,\n \/* input:active, *\/\n .mdi_mdi-format-text:active,\n .mdi_mdi-format-text1:active {\n position: relative;\n \/* top: 1px; *\/\n -webkit-transform: translate(0, 9px);\n \/* depth of button press *\/\n\n -webkit-box-shadow:\n\n 0px 0px 0px 0px rgba(128, 128, 128, .6);\n \/* shadow *\/\n background-color: #0688fa;\n }\n\n #lnkDownload:hover {\n -webkit-box-shadow:\n \/* gradient effects *\/\n 0px 4px rgba(98, 98, 98, 1),\n 0px 6px rgba(88, 88, 88, 1),\n 0px 8px rgba(78, 78, 78, 1),\n 0px 2px 1px -1px rgba(128, 128, 128, 1),\n \/* shadow *\/\n inset 14px 0px 10px 1px rgba(158, 150, 46, 0.8),\n inset -400px 10px 1px 20px rgba(255, 146, 1, 0.9);\n }\n\n .titles {\n display: block;\n font-size: 120%;\n text-align: center;\n padding: 4px;\n font-family: 'Jost*', \"Roboto\";\n color: rgb(255, 255, 255);\n margin: 10px 5px 7px 5px;\n width: 170px;\n align: center;\n background-color: rgba(0, 0, 0, 0.9);\n }\n\n .titles0 {\n \/* display: inline; *\/\n font-family: 'Jost*', \"Roboto\";\n font-size: 120%;\n text-align: center;\n padding: 10px;\n padding-top: 5px;\n padding-left: 0px;\n color: rgb(255, 255, 255);\n width: \"\"px;\n align: center;\n }\n\n .titles1 {\n display: block-inline;\n font-size: 120%;\n text-align: center;\n padding: 4px;\n font-family: 'Jost*', \"Roboto\";\n color: rgb(255, 255, 255);\n margin: 10px 5px 7px 5px;\n width: 170px;\n align: center;\n background-color: rgba(0, 0, 0, 0.9);\n }\n\n #basic {\n \/* -webkit-text-stroke: 0.5px Black; *\/\n font-weight: 700;\n }\n\n #shadow {\n text-shadow: 3px 3px 1px black;\n \/* -webkit-text-stroke: 0.5px Black; *\/\n }\n\n #shadow1 {\n text-shadow: 3px 3px 1px black;\n }\n\n #toggle {float: right;}\n\n \/* especifico del selectordecolor *\/\n .sp-replacer {\n position: relative;\n float: right;\n left: -35%;\n display: inline-block;\n *display: inline;\n \/* https:\/\/github.com\/bgrins\/spectrum\/issues\/40 *\/\n z-index: 9999994;\n padding: 0px;\n margin-left: 5px;\n margin-right: 5px;\n \/* height: 20px; *\/\n }\n\n .sp-dd {\n color:#000;\n padding-top: 0px;\n padding-right: 4px;\n }\n\n.sp-alpha {\n position: absolute;\n}\n\n .sp-choose {\n border-radius: 1px;\n border: 1px solid black;\n border-image: url(\"\/fonts\/button.png\") 30;\n -webkit-border-radius: 3px;\n }\n <link href=\"\/\/db.onlinewebfonts.com\/c\/d632db3304a2ab2099e1967e15c0b7dd?family=Futura\"rel=\"stylesheet\"type=\"text\/css\"\/>\n<\/style>\n\n","protected":false},"excerpt":{"rendered":"<p>A Postapocalyptical Meme Maker A Postapocalyptical Meme Maker Upload image here: Click here to save image Controls Info Privacy Select type of text Text GreenHUD GreenStat Check GreenText YellowStat Check YellowShunned YellowQuest addedCurrent quest GreenYellowQuest updated GreenQuest updated YellowEverybody disliked that GreenEverybody that YellowDiscovered GreenDiscovered YellowXP gain GreenXP gain YellowEnemyAlly Meme makerMeme template1Meme template2Meme template3 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/2077dreams.com\/index.php\/wp-json\/wp\/v2\/pages\/51"}],"collection":[{"href":"https:\/\/2077dreams.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/2077dreams.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/2077dreams.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/2077dreams.com\/index.php\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":3,"href":"https:\/\/2077dreams.com\/index.php\/wp-json\/wp\/v2\/pages\/51\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/2077dreams.com\/index.php\/wp-json\/wp\/v2\/pages\/51\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/2077dreams.com\/index.php\/wp-json\/wp\/v2\/media?parent=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}