Jump to content
Sign in to follow this  
bloodaxe

function dosen't do anything

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

Share this post


Link to post
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);

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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;

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...