rotate() to draw filled rectangle with X Y coordinates and height width on a Canvas

fillRect() to draw filled rectangles on Canvas

gctx.rotate(10*Math.PI/180);

Here we have fixed angle 10 in radian, each click of above Rotate button will rotate the canvas by 10 degree.

The center of rotation is fixed at origin or x=0,y=0 coordinate. We can shift origin of canvas by using translate()

var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
gctx.beginPath();
gctx.fillStyle = 'red';
gctx.fillRect(150,20,100,20);

my_function=function my_function(){	
gctx.rotate(10*Math.PI/180);
gctx.fillRect(150,20,100,20);
//gctx.setTransform(1, 0, 0, 1, 0, 0);
}
/////////////
$('#b1').click(function(){
my_function();
})

This article is written by plus2net.com team.

plus2net.com

fillRect() to draw filled rectangles on Canvas

Subscribe