CODEWITHSUNDEEP
javascripthtmlcanvas
ACantrell
ACantrell

Reputation: 3

Changing colors on a <Canvas> context

I just started working with Javascript and the Canvas tag and was having a lot of fun with it till I hit this snag... Basically I have three different objects being drawn on the canvas. The back ground on big black rectangle, then two shapes a rectangle and text. I want them to be two different colors, and so I use fillstyle() before drawing each. the problem is the the browser seems to ignore every call to fillstyle() after the first and sticks with the first color I choose. I've tried with and with out the beginPath() closePath(), fill() statements it seems to work with or with out these so I'm not if sure if there required I had seen it used while I was researching this issue. I've tried using RGB values instead of the color names. No luck.

     //background
     context.fillStyle = "Black";
     context.beginPath();
 context.fillRect(0, 0, 500, 300);
 context.closePath();
 context.fill();    

 //text
 context.fillStyle  = "Red";
     context.font = "20px Sans-Serif";
     context.textBaseline = "top";
     context.beginPath();
 context.fillText  ("TEXT", x, y );
 context.closePath();
 context.fill();     

 //Test block
 context.fillstyle = "Green";
 context.beginPath();
 context.fillRect(0,0,30,20);
 context.closePath();
 context.fill();

Upvotes: 0

Views: 2478

Answers (1)

keslert
keslert

Reputation: 311

It looks like you have an error with your test block:

context.fillstyle = "Green";

Should be 

context.fillStyle = "Green";

Upvotes: 1

Related Questions