Prev Demo
Rotating Image By 90 Degrees
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>Rotating image</title> <link href="StyleSheet1.css" rel="stylesheet" /> </head> <body> <canvas id="canvas" width=300 height=300></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.onload = start; img.src = "http://techfunda.com/HTPictures/Generics/5-635898849972807270.JPG"; function start() { ctx.translate(150, 150); ctx.rotate(Math.PI / 2); ctx.drawImage(img, -img.width / 2, -img.height / 2); ctx.rotate(-Math.PI / 2); ctx.translate(-canvas.width / 2, -canvas.height / 2); ctx.fillRect(0, 0, 25, 10); } </script> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
