---
title: CanvasRenderingContext2D.rotate()
slug: Web/API/CanvasRenderingContext2D/rotate
tags:
  - metodo
translation_of: Web/API/CanvasRenderingContext2D/rotate
---
<div>{{APIRef}}</div>

<p>El método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rotate()</code></strong> de la API Canvas 2D añade una rotación a la matriz de transformación.</p>

<h2 id="Sintaxis">Sintaxis</h2>

<pre class="syntaxbox">void <em>ctx</em>.rotate(<em>angulo</em>);
</pre>

<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;"></p>

<h3 id="Parámetros">Parámetros</h3>

<dl>
 <dt><code>angulo</code></dt>
 <dd>El ángulo de rotación en radianes, en sentido horario. Se puede usar <em><code>grado</code></em><code><code>*</code> Math.PI / 180</code> si se quiere calcular a partir de un valor de grado sexagesimal.</dd>
</dl>

<p>El centro de rotación es siempre el orígen del canvas. Para cambiar el centro de rotación hay que mover el canvas mediante el método {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.</p>

<h2 id="Ejemplos">Ejemplos</h2>

<h3 id="Rotando_una_figura">Rotando una figura</h3>

<p>En este ejemplo se rota un rectangulo 45º. Nótese que el centro de rotación es la esquina superior izquierda del canvas y no un punto cualquiera relativo a alguna figura.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js; highlight:[14]">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// origen del punto de transformación
ctx.arc(0, 0, 5, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();

// rectángulo sin rotar
ctx.fillStyle = 'gray';
ctx.fillRect(100, 0, 80, 20);

// rectángulo rotado 45º
ctx.rotate(45 * Math.PI / 180);
ctx.fillStyle = 'red';
ctx.fillRect(100, 0, 80, 20);

// se reinicia la matriz de transformación a la matriz identidad
ctx.setTransform(1, 0, 0, 1, 0, 0);
</pre>

<h4 id="Resultado">Resultado</h4>

<p>El <span style="color: blue;">centro de rotación es azul</span>. El <span style="color: gray;">rectángulo no rotado es gris</span>, y el <span style="color: red;">rectángulo rotado es rojo</span>.</p>

<p>{{ EmbedLiveSample('Rotating_a_shape', 700, 180) }}</p>

<h3 id="Rotando_una_figura_por_su_centro">Rotando una figura por su centro</h3>

<p>Este ejemplo rota una figura alrededor del punto central de ésta. Para realizarlo se aplican estos pasos a la matriz de transformación:</p>

<ol>
 <li>Primero, {{domxref("CanvasRenderingContext2D.translate()", "translate()")}} mueve el orígen de la matriz hacia el centro de la figura.</li>
 <li><code>rotate()</code> rota la matriz la cantidad deseada.</li>
 <li>Finalmente, <code>translate()</code> mueve el origen de la matriz de nuevo a su punto inicial. Esto se realiza utilizando los valores del centro de coordenadas de la figura en dirección negativa.</li>
</ol>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
</pre>

<h4 id="JavaScript_2">JavaScript</h4>

<p>La figura es un rectángulo con su esquina en (80, 60), un ancho de 140 y un alto de 30. El centro de la coordenada horizontal está en  (80 + 140 / 2) = 150. Su centro en la coordenada vertical será  (60 + 30 / 2) = 75. Por tanto, el punto central está en (150, 75).</p>

<pre class="brush: js">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// rectángulo sin rotar
ctx.fillStyle = 'gray';
ctx.fillRect(80, 60, 140, 30);

// Matriz de transformación
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);

// rectángulo rotado
ctx.fillStyle = 'red';
ctx.fillRect(80, 60, 140, 30);
</pre>

<h4 id="Resultado_2">Resultado</h4>

<p>El <span style="color: gray;">rectángulo no rotado es gris</span>, y el <span style="color: red;">rectángulo rotado es rojo</span>.</p>

<p>{{ EmbedLiveSample('Rotating_a_shape_around_its_center', 700, 180) }}</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Status</th>
   <th scope="col">Comentarios</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_exploradores">Compatibilidad con exploradores</h2>

<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a estos datos, vaya a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y haga un pull request.</div>

<p>{{Compat("api.CanvasRenderingContext2D.rotate")}}</p>

<h2 id="Véase_también">Véase también</h2>

<ul>
 <li>La interface donde se define este método: {{domxref("CanvasRenderingContext2D")}}</li>
</ul>