Difference between text and canvas rotation

by helxsz

HTML

<h1>Difference between </h1>
<h2>Text and canvas rotation</h2>

<p>I am a paragraph</p>
<canvas width="180" height="60"></canvas>

<footer>When rotated, text embedded in canvas<br />generally looks better.</footer>

CSS

body{
    font:15px/1.5 Arial,sans-serif;
}

h1,h2{
    font:36px 'Minion Pro',sans-serif;
    text-align:center;
}
h2{
    font-size:20px;
}

footer{
    padding-top:340px;
    text-align:center;
    font-size:12px;
    color:#aaa;
}

p,
canvas{
    position:absolute;
    margin-left:-90px;
    left:50%;
    top:180px;
    border:1px solid #ddd;
    
    -moz-transition:5s;
    -webkit-transition:5s;
    -o-transition:5s;
    -ms-transition:5s;
    transition:5s; 
    
    -moz-transform:rotate(20deg);
    -webkit-transform:rotate(20deg);
    -o-transform:rotate(20deg);
    -ms-transform:rotate(20deg); 
    transform:rotate(20deg); 
}

p{
    padding:20px 0;
    width:180px;
    height:25px;
    text-align:center;
    line-height:25px;
}

canvas{
    margin-top:100px;
}


body:hover p,
body:hover canvas{
    -moz-transform:rotate(220deg);
    -webkit-transform:rotate(220deg);
    -o-transform:rotate(220deg);
    -ms-transform:rotate(220deg);
    transform:rotate(220deg); 
}

JavaScript

var canvas = document.getElementsByTagName('canvas')[0],
    c = canvas.getContext('2d');

c.font = "15px Arial,sans-serif";
c.textAlign = "center";
c.fillText("I am a canvas",90,36);