How to use Canvas Translate Transform in HTML5
In this article I am going to explain about Canvas Translate Transform in Html5.
Canvas Translate Transform in Html5
Translate Transform is an Canvas tool that is use for move entire canvas element. Translate Transform enable us to move entire canvas element on specifics position. For its we use Translate() method that define canvas height and width position by which we can move on specifics position.
Syntax
|
<script>
cntx.translate(x, y);
</script>
|
Example
|
<html>
<head>
<style>
body {
}
}
</style>
<script>
window.onload = function () {
var cnv = document.getElementById("myCanvas");
var cntx = cnv.getContext("2d");
var rectWidth = 150;
var rectHeight = 75;
//In following method we can set the position of Canvas
cntx.translate(cnv.width / 4, cnv.height / 4);
cntx.fillStyle = "green";
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