Rotate the square on the plane


HTML5, Canvas

Source code
The rotation of a point by a specified angle relative to another point on the plane - is a part of a secondary school geometry curriculum. Consider an example with a square 200x200 and the origin of coordinates at its centre.

Your browser does not support Canvas

This article has continuations: Rotate the cube in space and Spinning spatial cross.
<canvas id="canvas" width="300" height="300" style="border: 1px solid gray">
    <p>Your browser does not support Canvas</p>
'use strict';

var canvas = document.getElementById('canvas');

var canvas_context = canvas.getContext('2d');

// Move the origin of coordinates to the center of the block
canvas_context.translate(canvas.width / 2, canvas.height / 2);

// The figure will be set as an array of points,
// in our case, the square consists of four points
var arr_t = [];
arr_t[0] = {x:-100, y:-100};
arr_t[1] = {x:100, y:-100};
arr_t[2] = {x:100, y:100};
arr_t[3] = {x:-100, y:100};

// Center of the figure.
// We'll make a turn around it
var t0 = {x:0, y:0};

// Rotation angle in degrees
var deg = 0;

// Create the current array of points
var arr_tt = [4];

// Set the repaint screen function with the rotation of the figure.
// Then this function will need to be inserted into the variable
// window.onload
function repaint() {

    // First, clear the screen - repaint with white color
    canvas_context.lineWidth = 4;
    fillFigure(canvas_context, arr_tt, 'rgb(255,255,255)', true);

    // Now turn the original figure by an angle
    // and overwrite the current figure
    for (var i = 0; i < arr_t.length; i++) {
        arr_tt[i] = rotateByDegree(t0, arr_t[i], deg);

    // Draw a new figure
    canvas_context.lineWidth = 2; // black translucent
    fillFigure(canvas_context, arr_tt, 'rgba(0,0,0,0.5)', false);

    // Increase an angle
    deg += 1;

// Draw a figure through points from an array,
// and optionally fill
function fillFigure(context, arr, color, fill) {
    context.strokeStyle = color;
    context.fillStyle = color;

    for (var i = 0; i < arr.length; i++) {

        if (i == 0) {
            context.moveTo(arr[i].x, arr[i].y);
        } else {
            context.lineTo(arr[i].x, arr[i].y);

    if (fill) {

// Turn the point t(x,y) by an angle (deg) relative to the point t0(x,y)
function rotateByDegree(t0, t, deg) {
    var t_new = {};

    // Translate the rotation angle from degrees to radians
    var rad = (Math.PI / 180) * deg;

    // Calculate the coordinates of the new point according to the formula
    t_new.x = t0.x + (t.x - t0.x) * Math.cos(rad) - (t.y - t0.y) * Math.sin(rad);
    t_new.y = t0.y + (t.x - t0.x) * Math.sin(rad) + (t.y - t0.y) * Math.cos(rad);

    // Return the received value
    return t_new;

// Set the screen repaint interval
window.onload = function() {
    setInterval(repaint, 50);
The center of rotation does not have to be in the middle of the figure. For example, it may be moved to the bottom right corner, or to the upper left, or you may determine the function of rotation. Anything you like.

Your browser does not support Canvas

Your browser does not support Canvas

Your browser does not support Canvas

Privacy policy
Back to Top