Canvas problem

JavaScript
1

I am trying to draw stars in canvas with the following code:

var canvas = document.getElementById("canvasOne");
var ctx = canvas.getContext("2d");

function drawScreen() { 
	ctx.fillStyle="black";
	ctx.fillRect(0,0,canvas.width,canvas.height);
	var star1=new sstar (100,100,"yellow",10,40,15);
	var star2 = new sstar (250,100,"green",10,25,10);
	star1.sdraw();
	star2.sdraw();
	}	
function sstar (x0,y0,scolor,korifes,r1,r2) {
	this.x0=x0;
	this.y0=y0;
	this.scolor=scolor;
	this.korifes=korifes;
	this.r1=r1;
	this.r2=r2;
	this.sdraw = function (){
		var gonia = 360/korifes;
		ctx.translate(x0,y0);
		ctx.fillStyle=scolor;
		ctx.moveTo(0,-r1);
		for (i=0;i<korifes/2;i++){ 
			ctx.rotate(gonia*Math.PI/180);
			ctx.lineTo(0,-this.r2);
			ctx.rotate(gonia*Math.PI/180);
			ctx.lineTo(0,-this.r1);
		}
		ctx.fill();
		
		ctx.translate(-x0,-y0);
	}
}	
	
window.onload=drawScreen;

the problem is whenever draw a new star all stars taken the same color (this of the last draw)

2

Hi there k33theo,

and a warm welcome to these forums. :grinning:

To stop the refill you need to use…

   ctx.beginPath();
   ctx.closePath();

…like this…

[code]

untitled document

[/code]

coothead

3

Though i do not yet understand how the last object draw affects the other (supposed to be already drawn ) it works perfectly!!!
Thanks coohead

4

Well, I don’t really understand any of it. :ng:

I just got lucky in finding the solution. :sunglasses:

coothead

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.