Question

Let say I have x, y, width and height. I need to draw a inclined/tilted Rectangle at particular angle. I cannot use context.rotate. Because it is changing other shapes of canvas.

Answer 1

You can use context.rotate, you just have to undo the rotation before you draw the other shapes. Like this:

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");

context.beginPath();
context.rect(88, 50, 200, 100);
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();

context.rotate(0.5);
context.beginPath();
context.rect(138, 120, 200, 100);
context.fillStyle = "#FE8E9D";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();

context.rotate(-0.5);
context.beginPath();
context.rect(188, 190, 200, 100);
context.fillStyle = "#FEEF8E";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();