How to use Canvas Scale Transform in HTML5
In this article I am going to explain about Canvas Transform Scale in Html5.
Canvas Scale Transform in Html5
We use Canvas Scale Transform for defined height and width of Canvas element. For its we use Scale() method where defined X and Y properties. X specifies width and y specifies height on an element.
Syntax
|
<script>
cntx.scale(x, y);
</script>
|
Example
|
<html>
<head>
<style>
body
{
margin: 0px;
padding: 0px;
}
</style>
<script>
window.onload = function () {
var cnvs = document.getElementById("myCanvas");
var cntx = cnvs.getContext("2d");
var rectWidth = 150;
var rectHeight = 75;
cntx.translate(cnvs.width / 3, cnvs.height / 4);
//In following method we can set height and width
cntx.scale(2, 1)
cntx.fillStyle = "brown";
cntx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" 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