Jump to content

function dosen't do anything


bloodaxe

Recommended Posts

I have run the gradient creation code on its own as the page loads, but now I want to use it in a button click event, so I have tried to enclose it as a function that the button onclick event calls. I get no response at all so I assume I need to pass something in as a parameter, but I cant see what. or does it need an event listener somewhere?

 

 

 

 

index.html

testprojectcss.css

Link to comment
Share on other sites

Your fillRect() function is creating a rectangle that's zero pixels tall, so you don't see the gradient.

This will make the rectangle 200 x 200 pixels:

 

ctx.fillRect(0,0,200,200);
Link to comment
Share on other sites

Thanks for that. pretty stupid really, but I see the reason so a small step forward.

Regards Bloodaxe

 

Er actually just hit another snag I have already had in another file. I changed the gradient color to green and discovered the gradient stops about 4/5ths across the <canvas> This happened exactly the same previously. So far no amount of fiddling has altered it. Can you see what I am doing? or is it a glitch? I am using Netbeans IDE 7.3.1 to create the files and running them in Firefox 23.0.1

Edited by bloodaxe
Link to comment
Share on other sites

The only thing I can imagine causing that is the rectangle being too small. Make the rectangle large enugh. If that's not the problem, provide some code I can test myself.

Link to comment
Share on other sites

Hi;

So here's a weird one! I have had a fiddle and eventually tried moving the attributes of the <canvas> into the tag instead of in the css file and the fill is 100%. I will attach the files so you can see.

 

The 820B file is the after one without any css. the 769B file goes with the css file and is the before set up.

Regards Bloodaxe.

index.html

index.html

testprojectcss.css

Link to comment
Share on other sites

The width and height attributes of the <canvas> element are there to determine the size of the drawing area. The CSS will distort the canvas in the same way it would distort an <img> element, try setting the width to 400px with CSS while keeping the width attribute at 200 just to see what happens.

You can put the attributes on the <canvas> element or set them with Javascript:

var c=document.getElementById("myCanvas");c.width = 200;c.height = 200;
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...