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.

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.

• javascript
• jquery
• html
• html5-canvas

• tulrich./geekstuff/canvas/perspective.html – CraigTP Commented Mar 15, 2012 at 11:21
• Can you please show me the code? – Imran Qadir Baksh - Baloch Commented Mar 15, 2012 at 11:26
• 1 You can see the code by viewing the source of the page (HTML) along with the linked jsgl.js file. – CraigTP Commented Mar 15, 2012 at 11:51

1 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();