# Calculate the bounding box's X, Y, Height and Width of a rotated element via JavaScript - Javascript Canvas Reference

Javascript examples for Canvas Reference:rect

## Description

Calculate the bounding box's X, Y, Height and Width of a rotated element via JavaScript

## Demo Code

```<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript">
\$(function(){// w  w  w .j  av  a  2s.  c o m
\$(function() {
var lienzo = document.getElementById('lienzo'),
contexto = lienzo.getContext('2d'),
contenedor = new Contenedor();
(function drawFrame() {
contexto.clearRect(0,0,lienzo.width, lienzo.height);
window.requestAnimationFrame(drawFrame, lienzo);
})();
});
this.x = lienzo.width/2;
this.y = lienzo.height/2;
this.w = 250;
this.h = 20;
this.angulo = 0;
this.factor = 0;
}
contexto.save();
contexto.translate(this.x, this.y);
if((Math.round( this.factor * 10 ) / 10) == 2.0) this.factor = 0;
this.factor += 0.003;
this.angulo = Math.PI * this.factor;
contexto.rotate(this.angulo);
contexto.beginPath();
contexto.rect(-(this.w/2), -(this.h/2), this.w, this.h);
contexto.stroke();
contexto.restore();
}
function Contenedor() {
this.x = lienzo.width/2;
this.y = lienzo.height/2;
this.angulo = 0;
this.w = 0;
this.h = 0;
}
contexto.save();
contexto.translate(this.x, this.y);
contexto.beginPath();
contexto.strokeStyle = '#E24B4B';
contexto.rect(-(this.w/2), -(this.h/2), this.w, this.h);
contexto.stroke();
contexto.restore();
}
});

</script>