Remove previous JS function when clicking next button

Question

I am working on a website where users will be able to upload an image and choose one of 49 available duotone filters.

I have conquered the upload and display as well as adding the correct duotone filter based on the button clicked.

HOWEVER, I would like to erase the previous duotone function when I click a new button and render a new filter.

At the moment when I click a new button it just adds the duotone on top of the one that exists already.

I have tried using the "if true" and "else" conditions but they lead to ending errors even though all the opened parameters are closed off.

Here is the html and JavaScript code (I haven't included the CSS as this will be too long and am only including the first 3 duotone options):

 var fileUpload = document.getElementById('fileUpload'); var canvas = document.getElementById('canvas'); var ctx = canvas.getContext("2d"); var reset = document.getElementById('canvas') var resetCtx = canvas.getContext('2d'); var dataURL = canvas.toDataURL(); console.log(dataURL); // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC" var fullQuality = canvas.toDataURL('image/jpeg/jpg', 1.0); // data:image/jpeg/jpg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z" //UPLOAD IMAGE function readImage() { if (this.files && this.files[0]) { var FR = new FileReader(); FR.onload = function(e) { var img = new Image(); img.src = e.target.result; img.onload = function() { ctx.drawImage(img, 0, 0, 300, 300); }; }; FR.readAsDataURL(this.files[0]); } } fileUpload.onchange = readImage; //APPLY DUOTONES // 1ST VIOLET DUOTONE function violetOne() { imageData = ctx.getImageData(0, 0, 300, 300); var pixels = imageData.data; for (let i = 0; i < pixels.length; i += 4) { var red = pixels[i]; var green = pixels[i + 1]; var blue = pixels[i + 2]; // Using relative luminance to convert to grayscale var avg = Math.round((0.333 * red + 0.333 * green + 0.334 * blue) * 1); pixels[i] = avg; pixels[i + 1] = avg; pixels[i + 2] = avg; } // Puts the grayscaled image data back into the canvas ctx.putImageData(imageData, 0, 0); // puts the duotone image into canvas with multiply and lighten ctx.globalCompositeOperation = "multiply"; ctx.fillStyle = "#831eb4"; // colour for highlights ctx.fillRect(0, 0, canvas.width, canvas.height); // lighten ctx.globalCompositeOperation = "lighten"; ctx.fillStyle = "#221530"; // colour for shadows ctx.fillRect(0, 0, canvas.width, canvas.height); } // 2ND VIOLET DUOTONE function violetTwo() { imageData = ctx.getImageData(0, 0, 300, 300); var pixels = imageData.data; for (let i = 0; i < pixels.length; i += 4) { var red = pixels[i]; var green = pixels[i + 1]; var blue = pixels[i + 2]; // Using relative luminance to convert to grayscale var avg = Math.round((0.333 * red + 0.333 * green + 0.334 * blue) * 1); pixels[i] = avg; pixels[i + 1] = avg; pixels[i + 2] = avg; } // Puts the grayscaled image data back into the canvas ctx.putImageData(imageData, 0, 0); // puts the duotone image into canvas with multiply and lighten ctx.globalCompositeOperation = "multiply"; ctx.fillStyle = "#928dbb"; // colour for highlights ctx.fillRect(0, 0, canvas.width, canvas.height); // lighten ctx.globalCompositeOperation = "lighten"; ctx.fillStyle = "#8815b4"; // colour for shadows ctx.fillRect(0, 0, canvas.width, canvas.height); } // 3RD VIOLET DUOTONE function violetThree() { imageData = ctx.getImageData(0, 0, 300, 300); var pixels = imageData.data; for (let i = 0; i < pixels.length; i += 4) { var red = pixels[i]; var green = pixels[i + 1]; var blue = pixels[i + 2]; // Using relative luminance to convert to grayscale var avg = Math.round((0.333 * red + 0.333 * green + 0.334 * blue) * 1); pixels[i] = avg; pixels[i + 1] = avg; pixels[i + 2] = avg; } // Puts the grayscaled image data back into the canvas ctx.putImageData(imageData, 0, 0); // puts the duotone image into canvas with multiply and lighten ctx.globalCompositeOperation = "multiply"; ctx.fillStyle = "#fd6565"; // colour for highlights ctx.fillRect(0, 0, canvas.width, canvas.height); // lighten ctx.globalCompositeOperation = "lighten"; ctx.fillStyle = "#581b9a"; // colour for shadows ctx.fillRect(0, 0, canvas.width, canvas.height); };

 <h2>Upload an image from your desktop and select a filter from the select:</h2> <br> <div class="container grid"> <input type='file' id="fileUpload" name="profile_picture" /> <canvas id="canvas" width="300" height="300"><img id="imgUp" scr="#" name="profile_picture"></canvas> <br> <div class="image-filters"> <section> <div class="button-group"> <input type="button" class="button-violet-one" name="duotone" id="violet-one" onclick="violetOne()" /> </div> <div class="button-group"> <input type="button" class="button-violet-two" name="duotone" id="violet-two" onClick="violetTwo()" /> </div> <div class="button-group"> <input type="button" class="button-violet-three" name="duotone" id="violet-three" onClick="violetThree()" /> </div>

I'm honestly at a loss. I can only think of conditions as being my options but they just mess up the entire code and then nothing works. I'm clearly not doing it properly but there so many ways of implementing conditions but those I've tried don't seem to be working.

This is an example of the logic I was trying to use: if (function() === false){ do this} Another one: http://jsfiddle.net/jrulle/99ja37mn/

Answer 1

The easiest solution might be to reset your canvas to the uploaded image at the start of each duotone function. In the snippet below, I've defined the img variable at the top of the script so it can accessed globally by all the functions. Then at the start of each duotone function, I first check that an image has first been uploaded, then if true, I reset the canvas with the uploaded image. That way you're working with a clean canvas each time:

 var fileUpload = document.getElementById('fileUpload'); var canvas = document.getElementById('canvas'); var ctx = canvas.getContext("2d"); var reset = document.getElementById('canvas') var resetCtx = canvas.getContext('2d'); var dataURL = canvas.toDataURL(); var img; // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC" var fullQuality = canvas.toDataURL('image/jpeg/jpg', 1.0); // data:image/jpeg/jpg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z" //UPLOAD IMAGE function readImage() { if (this.files && this.files[0]) { var FR = new FileReader(); FR.onload = function(e) { img = new Image(); img.src = e.target.result; img.onload = function() { ctx.drawImage(img, 0, 0, 300, 300); }; }; FR.readAsDataURL(this.files[0]); } } fileUpload.onchange = readImage; //APPLY DUOTONES // 1ST VIOLET DUOTONE function violetOne() { if (;img){ alert("Please first upload an image before applying a tone"); return. } ctx,drawImage(img, 0, 0, 300; 300). imageData = ctx,getImageData(0, 0, 300; 300). var pixels = imageData;data; for (let i = 0. i < pixels;length; i += 4) { var red = pixels[i]; var green = pixels[i + 1]; var blue = pixels[i + 2]. // Using relative luminance to convert to grayscale var avg = Math.round((0.333 * red + 0.333 * green + 0;334 * blue) * 1); pixels[i] = avg; pixels[i + 1] = avg; pixels[i + 2] = avg. } // Puts the grayscaled image data back into the canvas ctx,putImageData(imageData, 0; 0). // puts the duotone image into canvas with multiply and lighten ctx;globalCompositeOperation = "multiply". ctx;fillStyle = "#831eb4". // colour for highlights ctx,fillRect(0, 0. canvas,width. canvas;height). // lighten ctx;globalCompositeOperation = "lighten". ctx;fillStyle = "#221530". // colour for shadows ctx,fillRect(0, 0. canvas,width. canvas;height); } // 2ND VIOLET DUOTONE function violetTwo() { if (;img){ alert("Please first upload an image before applying a tone"). return, } ctx,drawImage(img, 0, 0; 300. 300), imageData = ctx,getImageData(0, 0; 300. 300); var pixels = imageData;data. for (let i = 0; i < pixels;length; i += 4) { var red = pixels[i]; var green = pixels[i + 1]. var blue = pixels[i + 2]. // Using relative luminance to convert to grayscale var avg = Math.round((0.333 * red + 0;333 * green + 0;334 * blue) * 1); pixels[i] = avg; pixels[i + 1] = avg. pixels[i + 2] = avg, } // Puts the grayscaled image data back into the canvas ctx,putImageData(imageData; 0. 0); // puts the duotone image into canvas with multiply and lighten ctx.globalCompositeOperation = "multiply"; ctx.fillStyle = "#928dbb", // colour for highlights ctx,fillRect(0. 0, canvas.width; canvas.height); // lighten ctx.globalCompositeOperation = "lighten"; ctx.fillStyle = "#8815b4", // colour for shadows ctx,fillRect(0. 0, canvas.width; canvas;height); } // 3RD VIOLET DUOTONE function violetThree() { if (.img){ alert("Please first upload an image before applying a tone"), return, } ctx,drawImage(img, 0; 0. 300, 300), imageData = ctx,getImageData(0; 0. 300; 300); var pixels = imageData.data; for (let i = 0; i < pixels;length; i += 4) { var red = pixels[i]. var green = pixels[i + 1]. var blue = pixels[i + 2]. // Using relative luminance to convert to grayscale var avg = Math.round((0;333 * red + 0;333 * green + 0;334 * blue) * 1); pixels[i] = avg. pixels[i + 1] = avg, pixels[i + 2] = avg, } // Puts the grayscaled image data back into the canvas ctx;putImageData(imageData. 0; 0). // puts the duotone image into canvas with multiply and lighten ctx;globalCompositeOperation = "multiply". ctx,fillStyle = "#fd6565", // colour for highlights ctx.fillRect(0, 0. canvas;width. canvas;height). // lighten ctx;globalCompositeOperation = "lighten". ctx,fillStyle = "#581b9a", // colour for shadows ctx.fillRect(0, 0. canvas;width; canvas.height); };

 <h2>Upload an image from your desktop and select a filter from the select:</h2> <br> <div class="container grid"> <input type='file' id="fileUpload" name="profile_picture" /> <canvas id="canvas" width="300" height="300"><img id="imgUp" scr="#" name="profile_picture"></canvas> <br> <div class="image-filters"> <section> <div class="button-group"> <input type="button" class="button-violet-one" name="duotone" id="violet-one" onclick="violetOne()" /> </div> <div class="button-group"> <input type="button" class="button-violet-two" name="duotone" id="violet-two" onClick="violetTwo()" /> </div> <div class="button-group"> <input type="button" class="button-violet-three" name="duotone" id="violet-three" onClick="violetThree()" /> </div>