Canvas

by giacal

HTML

<canvas></canvas>
<button>pulisci</button>

CSS

/*canvas{
 -webkit-transform: scale(0.5);
}*/

JavaScript

var cv = document.querySelector('canvas'),
    ct = cv.getContext('2d'),
    bt = document.querySelector('button');

cv.height=300;
cv.width=300;

ct.beginPath();
ct.moveTo(100,100);
ct.lineTo(100,200);
ct.lineTo(200,200);
ct.lineTo(200,100);
ct.lineTo(100,100);
ct.stroke();
ct.closePath();

ct.fillStyle="red";
ct.fillRect(120,145,60,20);

ct.fillStyle="red";
ct.lineWidth="8";
ct.strokeStyle="green";

cerchio(20,20,15);
ct.save();

ct.fillStyle="blue";
ct.strokeStyle="yellow";
cerchio(50,50,20);

ct.restore();
cerchio(80,80,15);

var r = 10, m = +1;
setInterval(function(){ 
   if( r >= 30 ) m = -1;
   if( r <= 10 ) m = +1;
   
   r = r + m;
   /*cv.width = cv.width;*/
   ct.clearRect(165,15,100,70);
   cerchio(200,50, r);        
    
}, 70);

function cerchio(x,y,r){
    ct.beginPath()
    ct.arc(x,y,r,0,360);
    ct.closePath();
    ct.stroke(); 
    ct.fill();
}

bt.addEventListener('click',function(){cv.width=0},false);