Changing gradient on custom heatmap.

[jennyzw]

I figured out how to change the color of a circle (red, green, yellow, etc) by passing in a parameter, but am not successful yet with gradients. I created a couple of gradients for testing, but when I pass the gradients (gradient1, gradient2), it does not change. Just picks up the last color in the gradient. The gradients work standing alone.

[darylsew]

http://www.html5canvastutorials.com/tutorials/html5-canvas-radial-gradients/ Be more specific - what is your issue? Relevant lines of code? Screenshots? What exactly is the 'it' that does not change, and how is a standalone gradient different from what you're attempting?

[jennyzw]

No, I know how to create a radial gradient. Like when I simply make a gradient and apply it to a circle I drew, it works. But when I try to pass it in as parameter, it only takes one of the colors in the gradient. Take a look at the code: 24-30 is where I created the gradient, and you can see I'm trying to pass gradient2 as a parameter in line 43. It works standing alone because if you go to line 37 and change "color" to "gradient2", the gradient shows up.

[darylsew]

If you paste the relevant few lines of code here and link to a version of the file tied to a specific commit for more context, if we run into a similar issue in the future, we can come back and know exactly what the issue was and how we fixed it. Could you do that?

[darylsew]

I think I've managed to catch your misunderstanding, though. See here - the gradient you're making is meant to be a fillStyle, then you ctx.fill(params describing area you want to fill).

[darylsew]

Oh, wasn't paying attention to all of the code... You defined gradient2 inside the function, and you're trying to use it as an input to that function. You should define it outside the scope of the function.

Once again, look into using javascript breakpoints and console.logs to debug your javascript. It goes a long way for figuring out just about any error.

[jennyzw]

Mhmm the scope issue makes sense... I just didn't define it out of the function cause the x and y coordinates of the gradient need to be the same as the parameters :/

On Fri, Aug 1, 2014 at 11:42 PM, Daryl Sew notifications@github.com wrote:

Oh, wasn't paying attention to all of the code... You defined gradient2 inside the function, and you're trying to use it as an input to that function. You should define it outside the scope of the function.

Once again, look into using javascript breakpoints and console.logs to debug your javascript. It goes a long way for figuring out just about any error.

— Reply to this email directly or view it on GitHub https://github.com/GoogleJump/Breakpoint/issues/16#issuecomment-50955740 .

Jenny Wang Wellesley College Class of 2017 (425) 647-0018

[darylsew]

You can probably define it outside of the function and modify it inside.

[darylsew]

...actually, though, we're going to be sending in the parameters that define the gradient into this same function, so you should just do everything inside based on a 'color' parameter. The color parameter and the volume parameter will be lists - make sense?

[jennyzw]

Haven't been able to successfully modify gradient1 inside the function to take parameters after I defined it outside. Still working on it...

On Sat, Aug 2, 2014 at 11:49 AM, Daryl Sew notifications@github.com wrote:

...actually, though, we're going to be sending in the parameters that define the gradient into this same function, so you should just do everything inside based on a 'color' parameter. The color parameter and the volume parameter will be lists - make sense?

— Reply to this email directly or view it on GitHub https://github.com/GoogleJump/Breakpoint/issues/16#issuecomment-50971080 .

Jenny Wang Wellesley College Class of 2017 (425) 647-0018

[darylsew]

Then do it all inside the function.