25 - CANVAS (scale)

Problema:Mostrar una imagen que gire en el lienzo y casa avance muestre la imagen con tamaño mayor.

pagina.html
estilos.css
Ejecución de la página

<!DOCTYPE HTML>
<html>
<head>
  <title>Título de la página</title>
  <meta charset="UTF-8">

<script type="text/javascript">
function retornarLienzo(x) {
  var canvas = document.getElementById(x);
  if (canvas.getContext) {
    var lienzo = canvas.getContext("2d");   
    return lienzo;
  } else
    return false;
}

function dibujar() {
  var lienzo=retornarLienzo("lienzo1");
  if (lienzo) {
    lienzo.clearRect(0,0,600,600);
    lienzo.save();
    lienzo.translate(300,300);
    lienzo.rotate(avance);
    lienzo.scale(tamx,tamy);
    lienzo.drawImage(img1,-125,-125);
    avance+=0.05;
    tamx+=0.01;
    tamy+=0.01;
    if (avance>Math.PI*2)
      avance=0;
    if (tamx>=10) {
      tamx=0.01;
      tamy=0.01;
    }
    lienzo.restore();  
  }
}

var avance=0;
var img1;
var tamx=0.01;
var tamy=0.01;
function inicio() {
  img1 = new Image(); 
  img1.src = 'http://www.tutorialesprogramacionya.com/imagenes/foto1.jpg';
  img1.onload = function(){ 
    setInterval(dibujar,50);
  }  
}

</script>

</head>
<body onLoad="inicio()">
<canvas id="lienzo1" width="600" height="600">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>

Retornar