var b = document.getElementById("myCanvas"); var c = b.getContext("2d"); var rotateSpeed = 0.02; var timeStep = 50; var w = c.canvas.width; var h = c.canvas.height; var cmTID; function Box(x, y, size, a) { this.x = x; this.y = y; this.size = size; this.angle = a; this.dx = 0; this.dy = 0; this.stroke = function() { c.save(); var x = this.x + this.size / 2; var y = this.y + this.size / 2; c.translate(x, y); c.rotate(this.angle); c.strokeStyle = "#ffcd8a"; c.strokeRect(-this.size / 2, -this.size / 2, this.size, this.size); c.restore(); }; } var boxes = []; for (var i = 1; i < 6; i = i + 1) { var a = Math.random() * 2 - 1; boxes.push(new Box(i * 50, i * 30, 100, a)); } for (var i = 0; i < boxes.length; i = i + 1) { boxes[i].stroke(); } function updateAll() { c.clearRect(0, 0, w, h); for (var i = 0; i < boxes.length; i = i + 1) { boxes[i].angle += rotateSpeed; boxes[i].stroke(); } clearTimeout(cmTID); cmTID = setTimeout(updateAll, timeStep); } var boxes = []; for (var i = 1; i < 6; i = i + 1) { var a = Math.random() * 2 - 1; boxes.push(new Box(i * 50, i * 30, 100, a)); } updateAll();