<!doctype html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
body{text-align: center;}
</style>
</head>
<body>
<canvas id="sun" height="500" width="500"
style='border:1px solid black;'>the sun</canvas>
<script>
var canvas = document.getElementById('sun');
var context = canvas.getContext('2d');
var i=0;
function ff()
{context.save();
context.translate(canvas.width/2,canvas.height/2);
context.rotate(.3*i);
f();i++;
context.restore();
};
function f(){
context.clearRect(0,0,canvas.width,canvas.height);
//alert(2);
context.beginPath();
context.moveTo(-15, canvas.height/2);
context.lineTo(15, canvas.height/2);
context.lineTo(-15, -canvas.height/2);
context.lineTo(15, -canvas.height/2);
context.fillStyle = "#ff8000";
context.closePath();
context.fill();
};
setInterval(ff,50);
</script>
</body>
</html>