: How to rotate html5 canvas as page background? 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).
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?
More posts by @Cugini213
1 Comments
Sorted by latest first Latest Oldest Best
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: developer.mozilla.org/en/drawing_graphics_with_canvas
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.