var canvasWidth; var canvasHeight; var interval = 350; var angleInDegrees = 0; function init() { canvas = document.getElementById("canvas"); ctx = canvas.getContext('2d'); canvasWidth = canvas.width; canvasHeight = canvas.height; setInterval(function () { redraw(); }, interval); } init(); function redraw() { angleInDegrees += 5; ctx.clearRect(0, 0, canvasWidth, canvasHeight); ctx.beginPath(); ctx.rect(200, 150, 5, 5); ctx.fill(); ctx.save(); ctx.translate(200, 150); ctx.rotate(angleInDegrees * Math.PI / 180); ctx.fillStyle = '#f00'; ctx.font = '40px san-serif'; ctx.textBaseline = 'top'; ctx.fillText("Hello rotated", 0, 0); ctx.restore(); ctx.fillStyle = '#f00'; ctx.font = '40px san-serif'; ctx.textBaseline = 'top'; ctx.fillText("Hello still", 0, 0); }
<canvas id="canvas" width=500 height=300></canvas>
body { background-color: ivory; } canvas { border:1px solid red; }