Writing Rotated Text on a JavaScript Canvas

JavaScript Canvas

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Writing Rotated Text on a JavaScript Canvas</title>
<style type="text/css">
* {margin: 0;padding: 0;font-size: .5cm;}
h1{
	font-family:  'Comfortaa', cursive;
	color: #F00;
	text-align: center;
	padding: 10px;
}
p{
	font-family: UZO1;
	color:#000000;
	text-align: left;
	text-indent: 50px;
	padding: 5px 10px;
}
canvas {border: 1px solid #f0f0f0;background: #FFF;margin-left:10px}
/* for Mobil Design */
@media (max-width: 768px){
canvas {margin:0}
}
</style>
</head>
<body>

<h1>JavaScript Canvas</h1>
<p id="yazi"></p>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
document.getElementById('yazi').innerHTML= "Rotated Text";
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");	
ctx.save();
ctx.translate( 300 / 4, 200 / 2 );
ctx.rotate( Math.PI / -2 );
ctx.font = "16px serif";
ctx.fillStyle = "#90D2F8"; 
ctx.textAlign = "center";
ctx.fillText( "Rotated Text", 0, -50 );
ctx.restore();
</script>
</body>
</html>