I have a small application that allows a user to manipulate objects on a canvas with fabric.js. I’m new to JS and Fabric and I’m hoping to get some direction on how I could write this neater:
var canvas = new fabric.Canvas('c', { preserveObjectStacking: true }); canvas.setHeight(412); canvas.setWidth(637); var oImg, isImageLoaded; // oImgObj bread and butter, kudos @grunt function replaceImage(oImgObj, imgUrl) { if (!isImageLoaded) return; //return if initial image not loaded var imgElem = oImgObj._element; //reference to actual image element imgElem.src = imgUrl; //set image source imgElem.onload = () => canvas.renderAll(); //render on image load } // initialize default frame (light brown wood oval) fabric.Image.fromURL('images/frames/LightBrownWoodOval.png', function (img) { isImageLoaded = true; oImg = img.set({ selectable: false, evented: false, }).scale(0.5); canvas.add(oImg).renderAll(); canvas.sendToBack(oImg); }); // add photo (link) $ (function () { $ ("#upload_link").on('click', function (e) { e.preventDefault(); $ ("#file:hidden").trigger('click'); }); }); var dataURL = canvas.toDataURL({ format: "png", left: 0, top: 0, width: canvas.width, height: canvas.height, }); // add photo document.getElementById('file').addEventListener("change", function (e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (f) { var data = f.target.result; fabric.Image.fromURL(data, function (img) { var oImg = img.set({ left: 400, top: 102, centeredScaling: true, lockUniScaling: true, cornerStyle: 'circle', transparentCorners: false, }).scale(1); canvas.add(oImg); canvas.setActiveObject(oImg); var image = canvas.getActiveObject(); image.moveTo(-1); canvas.discardActiveObject(); canvas.renderAll(); canvas.sendToBack(oImg); }); }; reader.readAsDataURL(file); }); const text = { left: 475, fontSize: 27, hasBorders: true, hasControls: false, selectable: true, lockRotation: true, lockMovementX: true, lockMovementY: true, align: 'mid', originX: 'center', originY: 'center', centeredScaling: true, }; // Text Fields canvas.add(new fabric.IText('In Loving Memory', { ...text, top: 25, })); canvas.add(new fabric.IText('Name', { ...text, top: 60, })); // Text Options var underline = document.getElementById('btn-underline'); var bold = document.getElementById('btn-bold'); var italic = document.getElementById('btn-italic'); underline.addEventListener('click', function () { dtEditText('underline'); }); bold.addEventListener('click', function () { dtEditText('bold'); }); italic.addEventListener('click', function () { dtEditText('italic'); }); // Font Styling function dtEditText(action) { var a = action; var o = canvas.getActiveObject(); var t; // If object selected, what type? if (o) { t = o.get('type'); } if (o && t === 'i-text') { switch (a) { case 'bold': var isBold = dtGetStyle(o, 'fontWeight') === 'bold'; dtSetStyle(o, 'fontWeight', isBold ? '' : 'bold'); break; case 'italic': var isItalic = dtGetStyle(o, 'fontStyle') === 'italic'; dtSetStyle(o, 'fontStyle', isItalic ? '' : 'italic'); break; case 'underline': var isUnderline = dtGetStyle(o, 'textDecoration') === 'underline'; dtSetStyle(o, 'textDecoration', isUnderline ? '' : 'underline'); break; canvas.renderAll(); } } } // Get the style function dtGetStyle(object, styleName) { return object[styleName]; } // Set the style function dtSetStyle(object, styleName, value) { object[styleName] = value; object.set({ dirty: true }); canvas.renderAll(); } // Switching Fonts document.getElementById("cinzel").addEventListener("click", function (e) { canvas.getActiveObject().set("fontFamily", "Cinzel"); canvas.renderAll(); }); document .getElementById("cinzelDecorative") .addEventListener("click", function (e) { canvas.getActiveObject().set("fontFamily", "Cinzel Decorative"); canvas.renderAll(); }); document .getElementById("monsieurladoulaise") .addEventListener("click", function (e) { canvas.getActiveObject().set("fontFamily", "Monsieur La Doulaise"); canvas.renderAll(); }); document.getElementById("opensans").addEventListener("click", function (e) { canvas.getActiveObject().set("fontFamily", "Open Sans"); canvas.renderAll(); }); document.getElementById("montserrat").addEventListener("click", function (e) { canvas.getActiveObject().set("fontFamily", "Montserrat"); canvas.renderAll(); }); document.getElementById("times").addEventListener("click", function (e) { canvas.getActiveObject().set("fontFamily", "Times New Roman"); canvas.renderAll(); }); // Centered Line var line = new fabric.Line([canvas.width / 2, 0, canvas.width / 2, canvas.height], { strokeWidth: 1, stroke: '#dddddd', selectable: false, }); canvas.add(line); // Save function download(url, name) { // make the link. set the href and download. emulate dom click $ ('<a>').attr({ href: url, download: name })[0].click(); } function downloadFabric(canvas, name) { // convert the canvas to a data url and download it. download(canvas.toDataURL({ multiplier: 4 }), name + '.png'); } // Print function printCanvas() { var dataUrl = document.getElementById('c').toDataURL( /* data multiplier?*/ ); //attempt to save base64 string to server using this var var windowContent = '<!DOCTYPE html>'; windowContent += '<html>'; windowContent += '<head><title>Print canvas</title></head>'; windowContent += '<body>'; windowContent += '<img src="' + dataUrl + '" onload=window.print();window.close();>'; windowContent += '</body>'; windowContent += '</html>'; var printWin = window.open('', '', 'width=340,height=260'); printWin.document.open(); printWin.document.write(windowContent); }