12.0p fillGradient sometimes resolves to plain white fill instead of a gradient

[Blama]

Hi Isomorphic,

I browsed the showcase. In this modified sample (v12.0p_2020-03-28, Chromium 80 / Win 10) fillGradient sometimes resolves to plain white fill instead of a gradient.
Many combinations cause this, I noticed it by moving the knobs. If you just change one value, the gradient is back again.

var slidersForm = isc.DynamicForm.create({
    ID:         "slidersForm",
    width:      290,
    titleWidth: 20,
    fields: [
        {name: "x1", type: "slider", defaultValue: [B]99[/B], min: 0, max: 100, step: 1, height: 20},
        {name: "y1", type: "slider", defaultValue: [B]98[/B], min: 0, max: 100, step: 1, height: 20},
        {name: "x2", type: "slider", defaultValue: [B]99[/B], min: 0, max: 100, step: 1, height: 20},
        {name: "y2", type: "slider", defaultValue: [B]98[/B], min: 0, max: 100, step: 1, height: 20}
    ],
    itemChanged : updateGradient
});

or

var slidersForm = isc.DynamicForm.create({
    ID:         "slidersForm",
    width:      290,
    titleWidth: 20,
    fields: [
        {name: "x1", type: "slider", defaultValue: [B]100[/B], min: 0, max: 100, step: 1, height: 20},
        {name: "y1", type: "slider", defaultValue: [B]100[/B], min: 0, max: 100, step: 1, height: 20},
        {name: "x2", type: "slider", defaultValue: [B]100[/B], min: 0, max: 100, step: 1, height: 20},
        {name: "y2", type: "slider", defaultValue: [B]100[/B], min: 0, max: 100, step: 1, height: 20}
    ],
    itemChanged : updateGradient
});

Best regards
Blama

[Isomorphic]

The reported behavior is a limitation of the underlying HTML5 canvas APIs, in particular 2Dcontext.createLinearGradient(). If you supply x1==x2 and y1==y2, the gradient is not applied to the fill region because the browser cannot determine which color stop to put first, or indeed whether a gradient should be applied at all.

If you configure the DrawPane to use SVG instead, the entire fill region will have the color from the first color stop applied, but note that this is different from the asymptotic behavior in the limit as as x2 approaches x1, which would be to apply one color stop to the left, and the other to the right, of x1==x2 (which one depending upon the whether we approach the limit from above or below).

We'll add a warning to report this situation since you should probably chose your gradient start/stop points to avoid it.

[Blama]

Hi Isomorphic,

I can see the validation errors you added here in the SmartClient and SmartGWT sample using v12.1p_2020-04-16.

Best regards
Blama