0

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?

Sebastian P.R. Gingter
  • 101
  • 2

1 Answers1

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

Simon Hayter
  • 32,999
  • 7
  • 59
  • 119
Davis Peixoto
  • 2,766
  • 14
  • 14