- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is a transformation matrix in HTML5 canvas?
HTML5 canvas provides methods that allow modifications directly to the transformation matrix. The transformation matrix must initially be the identity transform. It may then be adjusted using the transformation methods.
Example
Let us see an example of canvas transformation −
<!DOCTYPE HTML> <html> <head> <script> function drawShape(){ // get the canvas element using the DOM var canvas = document.getElementById('mycanvas'); // make sure we don't execute when canvas isn't supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); var sin = Math.sin(Math.PI/6); var cos = Math.cos(Math.PI/6); ctx.translate(200, 200); var c = 0; for (var i=0; i <= 12; i++) { c = Math.floor(255 / 12 * i); ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")"; ctx.fillRect(0, 0, 100, 100); ctx.transform(cos, sin, -sin, cos, 0, 0); } ctx.setTransform(-1, 0, 0, 1, 200, 200); ctx.fillStyle = "rgba(100, 100, 255, 0.5)"; ctx.fillRect(50, 50, 100, 100); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </script> </head> <body onload = "drawShape();"> <canvas id = "mycanvas" width = "400" height = "400"></canvas> </body> </html>
- Related Articles
- HTML5 Canvas Transformation Matrix
- HTML5 Canvas Transformation
- How to create a transformation matrix with HTML5?
- What is composition in HTML5 Canvas?
- What is getContext in HTML5 Canvas?
- What is the difference between SVG and HTML5 Canvas?
- Print a HTML5 canvas element
- Translating HTML5 canvas
- HTML5 Canvas distorted
- What are free libraries for Canvas in HTML5?
- Composition attribute in HTML5 Canvas?
- Create a pattern with HTML5 Canvas
- Draw a shadow with HTML5 Canvas
- What are save and restore methods in HTML5 Canvas?
- HTML5 Canvas Circle Text

Advertisements