Simple example of apply filter on image using canvas.
switch(filterOption){
case 'Normal':{
ctx.drawImage(image, 0, 0);
break;
}
case 'Moon':{
ctx.filter = "grayscale(100%)";
break;
}
case 'Hudson':{
ctx.filter = "hue-rotate(30deg) opacity(95%)";
break;
}
case 'Gingham':{
ctx.filter = "blur(1px) contrast(90%)";
break;
}
case 'Retro':{
ctx.filter = "hue-rotate(90deg) grayscale(50%)";
break;
}
}