Canvas Translate Transform,Canvas Scale Transform,Canvas Rotate Transform,Canvas Custom Transform,Canvas Shear Transform, Canvas Mirror Transform, Canvas Reset Transform, Canvas Transformation State Stack, Canvas Oval.
Canvas Translate Transform
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var rectWidth = 100; var rectHeight = 50; // translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); context.fillStyle = 'pink'; context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); </script> </body> </html> |
Result
Canvas Scale Transform
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var rectWidth = 100; var rectHeight = 50; // translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); // scale y component context.scale(2, 3); context.fillStyle = 'pink'; context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); </script> </body> </html> |
Result
Canvas Rotate Transform
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var rectWidth = 100; var rectHeight = 50; // translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); // rotate 45 degrees clockwise context.rotate(Math.PI / 5); context.fillStyle = 'pink'; context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); </script> </body> </html> |
Canvas Custom Transform
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var rectWidth = 100; var rectHeight = 50; // translation matrix: // 1 0 tx // 0 1 ty // 0 0 1 var tx = canvas.width / 2; var ty = canvas.height / 2; // apply custom transform context.transform(1, 0, 0, 1, tx, ty); context.fillStyle = 'pink'; context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); </script> </body> </html> |
Result
Canvas Shear Transform
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var rectWidth = 100; var rectHeight = 50; // shear matrix: // 1 sx 0 // sy 1 0 // 0 0 1 var sx = 0.75; // .75 horizontal shear var sy = 0; // no vertical shear // translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); // apply custom transform context.transform(1, sy, sx, 1, 0, 0); context.fillStyle = 'pink'; context.fillRect(-rectWidth / 2, rectHeight / -2, rectWidth, rectHeight); </script> </body> </html> |
Canvas Mirror Transform
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); // flip context horizontally context.scale(-1, 1); context.font = '20pt monospace'; context.textAlign = 'center'; context.fillStyle = 'pink'; context.fillText('weanswer.xyz', 0, 0); </script> </body> </html> |
Result
Canvas Reset Transform
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var rectWidth = 100; var rectHeight = 50; // translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); context.fillStyle = 'pink'; context.fillRect(-rectWidth / 2, rectHeight / -2, rectWidth, rectHeight); // Reset Transform // 1 0 0 // 0 1 0 // 0 0 1 // apply custom transform context.setTransform(1, 0, 0, 1, 0, 0); context.fillStyle = 'blue'; context.fillRect(0, 0, rectWidth, rectHeight); </script> </body> </html> |
Result
Canvas Transformation State Stack
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var rectWidth = 100; var rectHeight = 50; context.save(); // save state 1 context.translate(canvas.width / 2, canvas.height / 2); context.save(); // save state 2 context.rotate(Math.PI / 4); context.save(); // save state 3 context.scale(2, 2); context.fillStyle = 'pink'; context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); context.restore(); // restore state 3 context.fillStyle = 'blue'; context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); context.restore(); // restore state 2 context.fillStyle = 'yellow'; context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); context.restore(); // restore state 1 context.fillStyle = 'green'; context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); </script> </body> </html> |
Result
Canvas Oval
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var centerX = 0; var centerY = 0; var radius = 45; // save state context.save(); // translate context context.translate(canvas.width / 2, canvas.height / 2); // scale context horizontally context.scale(2, 1); // draw circle which will be stretched into an oval context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); // restore to original state context.restore(); // apply styling context.fillStyle = 'lightpink'; context.fill(); context.lineWidth = 5; context.strokeStyle = 'gray'; context.stroke(); </script> </body> </html> |
Result
More Stories
Amazing html canvas examples
html5 capture image from camera
Canvas Element