Hi so I’m trying to convert an image to sketch-like-image before uploading it to the server, the uploading part is not the problem, the conversion of image to sketch-like-image is. I failed to search a js library that will help me achieve this, and then I found this https://www.freecodecamp.org/news/sketchify-turn-any-image-into-a-pencil-sketch-with-10-lines-of-code-cf67fa4f68ce sample code in python then tried to recreate it using CSS only and I got it correctly using the CSS code below
filter: grayscale(100%) invert(100%) blur(5px);
mix-blend-mode: color-dodge;
Then after that I tried to recreate it in Vanilla Javascript using CANVAS API because I needed the image to be uploaded in the server that looks like a sketch-like-image, but got stuck in the process here are the stages of the conversion I’m doing see image below 
I got stuck in the stage 4, I can’t proceed with the stage 5, which is globalCompositeOperation = 'color-dodge'; when color-dodge applied to CANVAS API, to remove the blur and make it look like an sketch-image
- stage 1 is the raw image
- stage 2 is
grayscale(100%)working in javascript CANVAS API - stage 3 is
invert(100%)working in javascript CANVAS API - stage 4 is
blur(5px)working in javascript CANVAS API - stage 5
globalCompositeOperation = 'color-dodge'which is equivalent of CSS’mix-blend-mode: color-dodge;not working in javascript CANVAS API
and here’s my Javascript code below
let img = document.createElement('img');
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
ctx.filter = 'grayscale(100%) invert(100%) blur(5px)'; // stages 2,3,4 is working
ctx.globalCompositeOperation = 'color-dodge'; // stage 5 not working
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
Ok so I think that’s a lot so here’s a snippet of it for you guys to test it out. https://codepen.io/ohyeahhu/pen/MWQRweP
also if you guys know a JS library or tools that might help me achieve this feat, I’m very open to any suggestions.
note: only in javascript or any js library