- 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
HTML5 Canvas Transformation Matrix
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.
The transform (m11, m12, m21, m22, dx, dy) method must multiply the current transformation matrix with the matrix described by −
m11 m21 dx m12 m22 dy 0 0 1
The setTransform(m11, m12, m21, m22, dx, dy) method must reset the current transform to the identity matrix, and then invoke the transform(m11, m12, m21, m22, dx, dy) method with the same arguments.
<!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
- What is a transformation matrix in HTML5 canvas?
- HTML5 Canvas Transformation
- How to create a transformation matrix with HTML5?
- Translating HTML5 canvas
- HTML5 Canvas distorted
- HTML5 Canvas Circle Text
- HTML5 Canvas Degree Symbol
- HTML5 Canvas Font Size Based on Canvas Size
- HTML5 Canvas to PNG File
- Display video inside HTML5 canvas
- Perform basic HTML5 Canvas animation
- HTML5 Canvas fit to window
- Drop Shadow with HTML5 Canvas
- UIWebView HTML5 Canvas & Retina Display
- Composition attribute in HTML5 Canvas?

Advertisements