I have a canvas on the page, I draw an image into it, now I would like to apply filters like brightness, contrast, sepia etc...

The problem es when a user chooses filters, cause the user needs to be able to select and un-select filters.

So if for example, the user chooses sepia and contrast filter, I will apply both filters to the canvas, but if he un-select sepia I need to remove the sepia filter from the canvas (kind reset filters and apply only contrast)... and so on for all the available filters.

How can I achieve this?

Is there some easy way?

What I tried is quite awful at the moment:

function applyFilter(filter) {
    
 var canvas = document.getElementById('canvas')
  , context = canvas.getContext('2d'); 
      
  if (filter === 'sepia') {
    
   context.sepia(1);
  }
    
  if (filter === 'contrast') {
    
   context.contrast(1.3);
  }
    
}
function removeFilter(filter) {
    
 var canvas = document.getElementById('canvas')
  , context = canvas.getContext('2d'); 
      
  if (filter === 'sepia') {
    
   context.sepia(0);
  }
    
  if (filter === 'contrast') {
    
   context.contrast(1);
  }
    
}

I have a canvas on the page, I draw an image into it, now I would like to apply filters like brightness, contrast, sepia etc...

The problem es when a user chooses filters, cause the user needs to be able to select and un-select filters.

So if for example, the user chooses sepia and contrast filter, I will apply both filters to the canvas, but if he un-select sepia I need to remove the sepia filter from the canvas (kind reset filters and apply only contrast)... and so on for all the available filters.

How can I achieve this?

Is there some easy way?

What I tried is quite awful at the moment:

function applyFilter(filter) {
    
 var canvas = document.getElementById('canvas')
  , context = canvas.getContext('2d'); 
      
  if (filter === 'sepia') {
    
   context.sepia(1);
  }
    
  if (filter === 'contrast') {
    
   context.contrast(1.3);
  }
    
}
function removeFilter(filter) {
    
 var canvas = document.getElementById('canvas')
  , context = canvas.getContext('2d'); 
      
  if (filter === 'sepia') {
    
   context.sepia(0);
  }
    
  if (filter === 'contrast') {
    
   context.contrast(1);
  }
    
}

• javascript
• html
• canvas
• filter

2 Answers 2

You could use 'none' property

none : No filter is applied. Initial value.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('source');

ctx.filter = 'contrast(1.4)';
ctx.drawImage(image, 10, 10, 180, 120);
ctx.filter = 'none';

https://developer.mozilla/fr/docs/Web/API/CanvasRenderingContext2D/filter

You could clone the canvas to a hidden buffer and have 2 versions of the canvas then use the buffer to reset when removing a filter?

http://jsfiddle/grzuo9he/

var canvas = document.getElementById('canvas'),
    buffer = document.getElementById('buffer'),
    context = canvas.getContext("2d"),
    bufferContext = buffer.getContext("2d"),
    activeFilters = [];

context.moveTo(20, 20);
context.lineTo(100, 20);
context.fillStyle = "#999";
context.beginPath();
context.arc(100,100,75,0,2*Math.PI);
context.fill();

//Make buffer a clone of canvas
bufferContext.drawImage(canvas, 0, 0);

function applyFilter(filter) {
  if(filter){
    activeFilters.push(filter);
  }
  if (activeFilters.indexOf('sepia') > -1) {
   context.sepia(1);
  }
  if (activeFilters.indexOf('contrast') > -1) {
   context.contrast(1.3);
  }
}

function removeFilter(filter) {
  //Reset the canvas
  context.drawImage(buffer, 0, 0);

  //Remove this filter froma active filters
  activeFilters.splice(activeFilters.indexOf(filter), 1);

  applyFilter(false);
}