bloodaxe Posted September 18, 2013 Share Posted September 18, 2013 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 More sharing options...
Ingolme Posted September 18, 2013 Share Posted September 18, 2013 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 More sharing options...
bloodaxe Posted September 20, 2013 Author Share Posted September 20, 2013 (edited) 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 September 20, 2013 by bloodaxe Link to comment Share on other sites More sharing options...
Ingolme Posted September 20, 2013 Share Posted September 20, 2013 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 More sharing options...
bloodaxe Posted September 22, 2013 Author Share Posted September 22, 2013 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 More sharing options...
Ingolme Posted September 22, 2013 Share Posted September 22, 2013 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now