Variable font weight on HTML canvas capped at 999?

Question

I'm working on an variable type test for a project with a variable font i created.

The 'wght' axis contains a range of between 0-6600.

I had no problems animating the full range of values above as a DOM element with HTML and CSS.

But while trying out the same thing on HTML canvas, i realised the font weight resets itself to 0 once its passes 1000.

Is there a way to get around this? I tried looking into P5.js but the examples i found still manipulates DOM elements instead of using a canvas.

An excerpt of my code below, but i cant quite share the working demo with the font as the font is meant to be a proprietary font eventually.

@font-face {
   font-family: 'TestFont';
   src: url('/assets/TestFont_v2.ttf') format('truetype-variations');
   font-weight: 0 6600;
}




<canvas id="canvas-text" width="1000" height="500"> </canvas>



/*** js***/

var c = document.getElementById('canvas-text');
var ctx = c.getContext('2d');
function drawCanvas() {

    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, c.width, c.height);

    ctx.fillStyle = 'white';
    ctx.font = (scroll_percentage * 6600) + ' '  + '20px TestFont';
    const string_ = 'Lorem ipsum';
    ctx.fillText(string_, 20, 20);

}

let scroll_percentage = 0
function updateScrollProgress() {
    // get percentage of total scroll 
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    scroll_percentage = winScroll / height;

    // update canvas on scroll
    drawCanvas() 

}