Unable to detect letter C in tesseract using jQuery

Question

I am creating a pregnancy test site and using tesseract. I have created a layout using svg and trying to detect letter C and t but letter C is not detecting but T is detected.

Here is my OCR code. I am new in tesseract so I have developed this using multiple example.

this is the package I am using.

Here is my code.

const doOCR = async () => {
    if (!streaming || foundDeviceRecord || scheduler.getNumWorkers()===0) {
        console.log("1");
        scheduler.terminate();
        return;
    }

    let imageData = canvasInputCtx.getImageData(0, videoHeight/2 - videoHeight*0.15, videoWidth, videoHeight/2+videoHeight*0.15)
    let newCan = document.createElement('canvas');
    newCan.width = videoWidth;
    newCan.height = (videoHeight/2 + videoHeight*0.15) - (videoHeight/2 - videoHeight*0.15);
    let newCtx = newCan.getContext('2d');
    newCtx.putImageData(imageData, 0, 0);

    // processDevice(newCan);
    const image_canvas = newCan;
    scheduler.addJob('recognize', image_canvas).then(function(resp) {
        if(foundDeviceRecord) {
            scheduler.terminate();
            return;
        }

        let termObjects = {};
        for (let i = 0; i < resp.data.words.length; i++) {
            let word = resp.data.words[i].text.toLowerCase();
            if(word === 'C' || word === 'T' || word === 'c' || word === 't'){
                console.log(word);
                termObjects[word] = resp.data.words[i].bbox;
            }
        }
        if (Object.keys(termObjects).length !== 2){
            $('.cls-4').css({'stroke': 'red', 'stroke-width': '0.16px', 'opacity': '1'});
            return;
        }
        // Identify response via opencv
        $('.cls-4').css({'stroke': 'green', 'stroke-width': '0.16px', 'opacity': '1'});
        getActiveState(image_canvas, termObjects).then( (state) => {
            console.log('Status Detected', state, Date.now());
            responses[state] = responses[state] + 1;

            let decision = decisionCalc();
            if (decision){
                console.log('Inference Complete', Date.now())
                console.log(decision);
                document.cookie = "Result:"+decision;
                console.log(document.cookie);
            }
        });
    }).finally(async () => {
        if(foundDeviceRecord) {
            console.log('Process finished | Queue length: ', scheduler.getQueueLen());
            scheduler.terminate();
        }
    });
}

I have added second picture as well. If by using only color detection in that specific area, we can bring the output, then too it will be great help. We can use opencv but I am not sure how to do that?

Unable to detect letter C in tesseract using jQuery

0 Answers