JavaScript HTML5 Canvas Rotate Errors

Question

wwb00 · Answer

The rotate command is leaking into the later code. Also, the triangles move when they rotate. This should not be happening. Thanks, wwb00.
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
function drawRays(a,b,c,d,e){
	var numberOfRays = 8;
	for(i=0;i<(8);i++){
	ctx.beginPath();
   ctx.strokeStyle = e;
   ctx.rotate((((360/numberOfRays)-numberOfRays)*i)*Math.PI/180);
   ctx.rect(a,b,c,d);
   ctx.stroke();
   ctx.fillStyle = e;
   ctx.fill();
    ctx.closePath();
    }
}
drawRays(215,148.875,50,0.5,"#ffd633");

wwb00 · Answer

attachment

wwb00 · Answer

@dan815

wwb00 · Answer

@UnkleRhaukus @zepdrix @whpalmer4 @jagr2713

wwb00 · Answer

I can post the HTML if it makes it easier to test.

wwb00 · Answer

Canvas

Home

Rectangle

Circle

Canvas Practice

House

woodrow73 · Answer

Semi-colon missing after drawTriangle() in house.js And there is a way to reset the canvas rotations via the context's save(); restore(); methods. You can save(); the context before you make a rotational change, and restore(); the context when you wish to restore it's old values. (by the way, code in openstudy can be encased in 3 ``` ontop & on bottom to format it) ``` drawBackground("#3e9aff");//colour drawHouse(600,300,360,250,2);//(x,-y,length,width,pWidth) drawTriangle(560,300,780,200,1000,300,"#994c00");//((a,b)(c,d)(e,f)g=colour drawCircle(150,150,50,"#ffd633");//based on centre-(x,-y,radius,colour); ctx.save(); drawRays(215,148.875,50,0.5,"#ffd633"); ctx.restore(); drawGround("green");//colour ``` This should do the trick for the ground issue. Also, the rotate function does not focus on individual elements sadly, which is why the rays appear to run away from you... However, I stumbled on a brilliant stackexchange post which provides a method to solve just that: (the post with 35 upvotes): http://stackoverflow.com/questions/2677671/how-do-i-rotate-a-single-object-on-an-html-5-canvas ``` function drawImageRot(img,x,y,width,height,deg){ //Convert degrees to radian var rad = deg * Math.PI / 180; //Set the origin to the center of the image ctx.translate(x + width / 2, y + height / 2); //Rotate the canvas around the origin ctx.rotate(rad); //draw the image ctx.drawImage(img,width / 2 * (-1),height / 2 * (-1),width,height); //reset the canvas ctx.rotate(rad * ( -1 ) ); ctx.translate((x + width / 2) * (-1), (y + height / 2) * (-1)); } //by stackexchange user: user1602942 ``` I restructured it a bit to work for boxes: ``` function drawBoxRot(x,y,width,height,deg,colour){ //save canvas state prior to manipulation ctx.save(); //Convert degrees to radian var rad = deg * Math.PI / 180; //Set the origin to the center of the box ctx.translate(x + width / 2, y + height / 2); //Rotate the canvas around the origin ctx.rotate(rad); //color the box ctx.fillStyle = colour; //draw the box ctx.fillRect(width / 2 * (-1),height / 2 * (-1),width,height); //reset the canvas ctx.restore(); } ``` (I also added the save() restore() calls at the beginning and end of all the functions) I'm not particularly good at geometry, but now since you can at least have the rotation act as you would expect it to, making the sun rays in a loop should be easier. http://jsbin.com/xiqucewanu/edit?html,js,output