How to use Canvas Custom Transform in HTML5
In this article I am going to explain about Canvas Custom Transform in Html5.
Canvas Custom Transform in Html5
Custom Transform use for set an element as an matrix form. For its we require six value in the form of 3*3. For custom transform we use transform() method.
Syntax
|
<script>
cntx.transform(val1,val2,val3,val4,val5,val6);
</script>
|
Example
|
<html>
<head>
<style>
body
{
margin: 0px;
padding: 0px;
}
</style>
<script>
window.onload = function () {
var cnv = document.getElementById("cnvx");
var cntx = cnv.getContext("2d");
var rectWidth = 200;
var rectHeight = 100;
var tx = cnv.width / 4;
var ty = cnv.height / 3;
// Fill hear custon tranform
cntx.transform(.5, 0, 0, 1, tx, ty);
cntx.fillStyle = "blue";
cntx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
};
</script>
</head>
<body>
<canvas id="cnvx" width="578" height="200"></canvas>
</body>
</html>
|
Output
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