CanvasRenderingContext2D.rotate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since Ð¸ÑÐ»Ñ 2015 Ð³..

Syntax

void ctx.rotate(angle);

Parameters

angle: Ð£Ð³Ð¾Ð» Ð¿Ð¾Ð²Ð¾ÑÐ¾ÑÐ° Ð¿Ð¾ ÑÐ°ÑÐ¾Ð²Ð¾Ð¹ ÑÑÑÐµÐ»ÐºÐµ, Ð² ÑÐ°Ð´Ð¸Ð°Ð½Ð°Ñ. ÐÑ ÑÐ°ÐºÐ¶Ðµ Ð¼Ð¾Ð¶ÐµÑÐµ Ð¸ÑÐ¿Ð¾Ð»ÑÐ·Ð¾Ð²Ð°ÑÑ degree * Math.PI / 180 ÐµÑÐ»Ð¸ Ð²Ñ ÑÐ¾ÑÐ¸ÑÐµ Ð¸ÑÐ¿Ð¾Ð»ÑÐ·Ð¾Ð²Ð°ÑÑ Ð´Ð»Ñ ÑÐ³Ð»Ð° Ð·Ð½Ð°ÑÐµÐ½Ð¸Ðµ Ð³ÑÐ°Ð´ÑÑÐ° (degree).

ÐÑÐ¸Ð¼ÐµÑÑ

ÐÑÐ¿Ð¾Ð»ÑÐ·Ð¾Ð²Ð°Ð½Ð¸Ðµ Ð¼ÐµÑÐ¾Ð´Ð° `rotate`

HTML

html

<canvas id="canvas"></canvas>

JavaScript

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

ctx.rotate((45 * Math.PI) / 180);
ctx.fillRect(70, 0, 100, 30);

// reset current transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.rotate(45 * Math.PI / 180);
ctx.fillRect(70,0,100,30);
ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);