Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I want to achieve the following: Image a white sheet of paper on a black desk. Then rotate the paper a little bit to the left (like, 25 degrees). Now you still have the black desk, and a rotated white box on it.

In this rotated white box I want to place non-rotated normal html content like text, tables, div's etc.

I already have a problem at the very first step: rotating a rectangle. This is my code so far:

<html>
<head>
<script>
function draw() {
 var canvas=document.getElementById("myCanvas");
 var c=canvas.getContext("2d");

 c.fillStyle     = '#00';
 c.fillRect(100, 100, 100, 100);
 c.rotate(20); 
 c.fillStyle     = '#ff0000';
 c.fillRect(150, 150, 10, 10);

 }
</script>
</head>
<body onload="draw()">
 <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>

With this, I see only a normal black box. Nothing else. I assume there should be a red, rotated box too, but there's nothing.

What is the best approach to reach this and to have it as a (scaling) background for my web page?

share|improve this question

closed as off topic by John Conde Dec 28 '10 at 13:44

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

    
As per the FAQ design questions belong on Doctype –  John Conde Dec 28 '10 at 13:45

1 Answer 1

I can see one error on your code:

c.fillStyle     = '#00';

should be

c.fillStyle     = '#000';

This should help. Also follow a link with some examples about what you want: https://developer.mozilla.org/en/drawing_graphics_with_canvas

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.