All geek questions in one place

How to rotate existing HTML5 canvas content?

Is there a way to rotate existing HTML5 canvas content using Javascript? I know that you can rotate the image that will be drawn on the canvas, but I want to rotate the content that was drawn on the canvas, for example, a 200x200 angle of a 400x400 canvas or any specific area of ​​an existing canvas.

The same question for scaling existing canvas content ...

I know that getImageData / putImageData provide the ability to convert an array of pixels, but it is too slow and inefficient.

+4
source share
2 answers

This is pretty easy to do with a temporary canvas.

Live demo

Live animation demonstration (just for that)

The above example draws 2 windows, then rotates and scales from 0.0 to 200,200

var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"); canvas.width = canvas.height = 400; // fill the canvas black, and draw 2 boxes ctx.fillStyle = "#000"; ctx.fillRect(0,0,400,400); ctx.fillStyle = "rgb(255,0,0)"; ctx.fillRect(10,10,190,190); ctx.fillStyle = "rgb(255,255,0)"; ctx.fillRect(250,250,90,90); // Create a temp canvas to store our data (because we need to clear the other box after rotation. var tempCanvas = document.createElement("canvas"), tempCtx = tempCanvas.getContext("2d"); tempCanvas.width = canvas.width; tempCanvas.height = canvas.height; // put our data onto the temp canvas tempCtx.drawImage(canvas,0,0,canvas.width,canvas.height); // Append for debugging purposes, just to show what the canvas did look like before the transforms. document.body.appendChild(tempCanvas); // Now clear the portion to rotate. ctx.fillStyle = "#000"; ctx.fillRect(0,0,200,200); ctx.save(); // Translate (190/2 is half of the box we drew) ctx.translate(190/2, 0); // Scale ctx.scale(0.5,0.5); // Rotate it ctx.rotate(45*Math.PI/180); // Finally draw the image data from the temp canvas. ctx.drawImage(tempCanvas,0,0,200,200,10,10,190,190); ctx.restore();
+11
source

If you first want to draw a canvas , then rotate it for use, for example. corners, you can do this when you "clone" the canvas or using CSS.

<strong> Examples

Get the first element of the canvas:

 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");

draw it:

 ctx.fillStyle = 'blue'; ctx.fillRect(0,0, 25, 5); ctx.fill(); ctx.fillStyle = 'red'; ctx.fillRect(25, 0, 25, 5); ctx.fill();

clone it to another canvas (which rotates using CSS):

 var ctx2 = document.getElementById("canvas2").getContext("2d"); ctx2.drawImage(canvas, 0,0);

or rotate the canvas while you “clone” it:

 var ctx3 = document.getElementById("canvas3").getContext("2d"); ctx3.rotate(Math.PI/2); ctx3.translate(0,-50); ctx3.drawImage(canvas, 0,0);

here is the CSS for its rotation:

 #canvas2 { -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); }

enter image description here

Here is a complete example:

 <!DOCTYPE html> <html> <head> <script> window.onload = function() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = 'blue'; ctx.fillRect(0,0, 25, 5); ctx.fill(); ctx.fillStyle = 'red'; ctx.fillRect(25, 0, 25, 5); ctx.fill(); var ctx2 = document.getElementById("canvas2").getContext("2d"); ctx2.drawImage(canvas, 0,0); var ctx3 = document.getElementById("canvas3").getContext("2d"); ctx3.rotate(Math.PI/2); ctx3.translate(0,-50); ctx3.drawImage(canvas, 0,0); } </script> <style> #canvas2 { -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); } </style> </head> <body> <canvas id="canvas" width="50" height="50"></canvas> <canvas id="canvas2" width="50" height="50"></canvas> <canvas id="canvas3" width="50" height="50"></canvas> </body> </html>
+5
source

Source: https://habr.com/ru/post/1386478/

More articles:


All Articles