How to use Canvas Rotate Transform in HTML5
In this article I am going to explain about Canvas Rotate Transform in Html5.
Canvas Rotate Transform in Html5
Use of Canvas Rotation Transform to defined rotation of an element. For its we use rotate() method where we defined angle and radius of an element.
Syntax
|
<script>
cntx.rotate(rotation);
</script>
|
Example
|
<html>
<head>
<style>
body
{
margin: 0px;
padding: 0px;
}
</style>
<script>
window.onload = function () {
var cnvs = document.getElementById("cnvsh");
var cntx = cnvs.getContext("2d");
var rectWidth = 150;
var rectHeight = 75;
cntx.translate(cnvs.width / 5, cnvs.height / 2);
// rotate 50 degrees clockwise
cntx.rotate(Math.PI / 2);
cntx.fillStyle = "blue";
cntx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
};
</script>
</head>
<body>
<canvas id="cnvsh" width="500" height="200"></canvas>
</body>
</html>
|
Output
Further Readings
You may also want to read these related articles: here
Ask Your Question
Got a programming related question? You may want to post your question here