Canvas rectangle fill with colour

I was trying to create a rectangle which within html 5 canvas for which i can provide value from min to max. For this i am thinking to create a gradient variable like

  defaultGradient: {
        0.4: 'blue',
        0.6: 'cyan',
        0.7: 'lime',
        0.8: 'yellow',
        1.0: 'red'
    }

For instance user enters value 50 so the application should select mid of blue and Cyan and fill the rectangle. help appreciated. I have gone through with different links of SO but didn’t worked for me


Source: stackoverflow-javascript