

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 Questions & Answers
- 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 Data Transformation?
- What is Variable Transformation?
- What is the difference between SVG and HTML5 Canvas?
- Print a HTML5 canvas element
- Translating HTML5 canvas
- HTML5 Canvas distorted
- What is scale transformation in JavaFX?
- Create a pattern with HTML5 Canvas
- Draw a shadow with HTML5 Canvas
- What are free libraries for Canvas in HTML5?
Advertisements