
- 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
HTML5 Canvas Transformation
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
- What is a transformation matrix in HTML5 canvas?
- Translating HTML5 canvas
- HTML5 Canvas distorted
- HTML5 Canvas Circle Text
- HTML5 Canvas Degree Symbol
- HTML5 Canvas Font Size Based on Canvas Size
- How to create a transformation matrix with HTML5?
- HTML5 Canvas to PNG File
- Display video inside HTML5 canvas
- Circle Collision Detection HTML5 Canvas
- Print a HTML5 canvas element
- Perform basic HTML5 Canvas animation
- Drop Shadow with HTML5 Canvas
- HTML5 Canvas fit to window
Advertisements