How to rotate html5 canvas as page background?
Posted
by
Sebastian P.R. Gingter
on Pro Webmasters
See other posts from Pro Webmasters
or by Sebastian P.R. Gingter
Published on 2010-12-28T06:26:25Z
Indexed on
2010/12/28
7:00 UTC
Read the original article
Hit count: 312
html5
Hi,
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?
© Pro Webmasters or respective owner
