1

I'd like to do a project working together with Canvas in html5 (Canvas in python didn't work as nice as in html5 :/ ) but I have a problem.

I want to have some rectangles with different colors. Odd Rectangles (e.g. 1, 3, ...) should have a different color than others. But my problem starts without the if-function as well.

Simple example:

[http://jsfiddle.net/a7pwuynb/][1]

As you can see, the first rectangle should be "blue", the second one should be "yellow". But in the program all rectangles becoming "yellow". Can't explain myself, why it's like this.

Afterwards it should be like this, but here is the problem still working:

[http://jsfiddle.net/r2g9ybpw/][2]

As well I am lost with the "click"-function (copied the function from another example). Would be glad to get a tipp here as well. I want to make it like this that I make a click on the rectangle and it tells me his number. Afterwards I want to change the color. But that's the future plan. First I have to fix the problem with the colors and the click-function.

Would be glad to get help from your site.

Thank you in advance :)

Greets

Robin

P.S.: This is my first entry here that's why I didn't understand quite well how it should work with the "jsfiddle.net-Link in the future. Hopefully someone of you can explain it to me if I did it right. Tried to follow all the instructions given in the website.

2
  • jsfidlle you forgot beginPath() and closePath() on context
    – c.bear
    Sep 1, 2015 at 9:45
  • thank you for your answer. In this tutorial the author is doing quite the same like me but he don't need "beginPath()" and "closePath()" for his rectangles: html5.litten.com/… Why so?
    – robin
    Sep 1, 2015 at 10:04

1 Answer 1

0

About your link:

ctx.fillStyle = '#FA6900';
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur    = 4;
ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(0,0,15,150);
ctx.save();

ctx.fillStyle = '#E0E4CD';
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur    = 4;
ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(30,0,30,150);
ctx.save();

With ctx.save() context is pushed onto the stack. Here stack size is 2.

ctx.restore();
ctx.beginPath();
ctx.arc(185, 75, 22, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

ctx.restore();
ctx.beginPath();
ctx.arc(260, 75, 15, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

With context.restore() context is popped from stack. In other word your current context is the last one you have saved (e.g. the one with fillStyle #E0E4CD). Notice that beginPath() and closePath() are present the second arc method is called!

5
  • thank you for your explanation. When I try it in my fiddle with the "context.save()"-function it doesn't work neither like in the example. Sounds like I need the "beginPath()"-function in my case. But don't understand why. jsfiddle.net/33hLnv91
    – robin
    Sep 1, 2015 at 10:34
  • you may want to take a look here too stack on wiki
    – c.bear
    Sep 1, 2015 at 11:04
  • thanks a lot to all of you. That helps me a lot. I will try to comprehend your points. Still I don't understand why it works in the tutorial like this but not in my example but I'll do my best to understand it soon. Maybe if you don't mind I'd like to understand why the click-function isn't working neither?
    – robin
    Sep 1, 2015 at 12:51
  • click on canvas here we go. flag my answer as solution if it solved your problems.
    – c.bear
    Sep 1, 2015 at 13:28
  • thank you for the answer. I'll try to understand it.
    – robin
    Sep 1, 2015 at 14:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.