gradient.addColorStop is not a function about react-native-canvas

[trickeyd]

These are the properties of the object returned by createRadialGradient:

_40: 0
_65: 0
_55: null
_72: null
then: null
catch: null
done: null
finally: null

[iddan]

Hey there, thanks for trying the module and reporting.
react-native-canvas returns promises instead of values for all of it's methods so if you're code looks like this:

class App extends Component {
    handleCanvas = (canvas) => {
         const ctx = canvas.getContext('2d')
         const gradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)
         gradient.addColorStop(offset, color)

It should look like:

class App extends Component {
    handleCanvas = async (canvas) => {
         const ctx = canvas.getContext('2d')
         const gradient = await ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)
         gradient.addColorStop(offset, color)

By await-ing for the gradient object you can access it's methods.
Please share if that worked for you or need more help.

[trickeyd]

Thanks for coming back. Yes I saw it was a promise so I tried:

handleCanvas = (canvas) => { 
const ctx = canvas.getContext("2d")
const gradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)
         .then(gradient => {
                 gradient.addColorStop(offset, color)
         })

But the promise never resolves.

I just tried your implementation too - first time I've used async :-) - but it never gets past await. So in the example bellow, "after" is never logged.

        console.log('before');
        gradient = await ctx.createRadialGradient(36.3, 39.6, 0.0, 36.3, 39.6, 36.5);
        console.log('after');

:edit: = the 'then' method is actually null as shown above

:edit: - :edit: = actually that cant be the case as it doesn't throw a null exception when I call it. Must be something to do with the way I was logging it.

[iddan]

Will look into it

[trickeyd]

Hello - I was just wondering if you have had a chance to look into this at all. I'm hoping that it's just to do with my own implementation.

Have you tried to use the method yourself?

[trickeyd]

(Thanks BTW - I'm sure you're busy)

[iddan]

I will try it later today

[trickeyd]

Hey - I updated to: "react-native-canvas": "^0.1.9"

Unfortunately it still doesn't work I'm afraid.

The Promise now resolves but it appears to return an empty object.

console.log("before");
gradient = await ctx.createRadialGradient(36.3, 39.6, 0.0, 36.3, 39.6, 36.5);
console.log("after", gradient);

// before
// after Object {}

[iddan]

gradient should be an empty object

[iddan]

Does it render well?

[trickeyd]

It has no methods :-( On 5 Sep 2017 10:52 pm, "Iddan Ahahronson" <[email protected]> wrote: Is it renders well? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#25 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABDlX5C6ehZ98TNipfIbuclD2kFQkE2Aks5sfWArgaJpZM4O7FCp> .

[iddan]

Oh, will look into it

[iddan]

resolved in version 0.1.18

[akiladevinda]

Still Having this issue. After set 'await' nothing will return

This is my code

async function resetCanvas(canv) {
  savedPoints = [];
  pointIndex = 1;
  toolState = 'none';
  linePath = [];
  annotations = [];

  pointIndex = 1;
  //axisX      = margin;
  //axisY      = titleHeight + margin;
  barWidth = 20;
  barY = axisY;
  axisHeight = height - titleHeight - subtitleHeight - 2 * margin;
  barHeight = axisHeight;
  axisWidth = width - 2 * margin - barWidth - 70;
  barX = axisX + axisWidth + margin;
  colors = [];
  for (let i = rgbGrd.length - 1; i >= 0; i--) {
    colors.push(
      'rgb(' + rgbGrd[i][0] + ',' + rgbGrd[i][1] + ',' + rgbGrd[i][2] + ')',
    );
  }
  grd = await canv.createLinearGradient(0, barY, 0, barY + barHeight);
  for (let i = 0; i < colors.length; i++) {
    grd.addColorStop(i / (colors.length - 1), colors[i]);
  }
  // document.getElementById("point").innerHTML =
  //   "Move mouse over scan to see height values.<br>Click to save a point in the form: (ID), Y, X, Z";
  canv.clearRect(0, 0, width, height);
  canv.fillStyle = 'white';
  canv.fillRect(0, 0, width, height);
  //canv.stroke();
  canv.beginPath();
  //   enableButtons(true);

  //canv.clearRect(0, 0, width, height);
  //canv.fillStyle="white";
  //canv.fillRect(0, 0, width-1, height-1);
  //canv.fillStyle="black";
  //canv.rect(0, 0, width, height);
  //canv.beginPath();
}