Capítulo 4

Canvas - Exemplo 18: Métodos save() e restore().

Para os dois canvas o código é igual sendo que à esquerda é sem aplicação dos métodos e à direita com aplicação.

Conteúdo alternativo para navegadores que não suportam canvas.

Conteúdo alternativo para navegadores que não suportam canvas.

JavaScript

<script>
// canvas da esquerda
var canvas = document.getElementById('quadro');
var ctx = canvas.getContext('2d');  
 
	ctx.fillStyle = 'red';
	ctx.fillRect(40,20,40,140);
	
	ctx.fillStyle = 'green';
	ctx.fillRect(110,20,40,140);
	
	ctx.fillStyle = 'blue';
	ctx.fillRect(180,20,40,140);
	
	ctx.fillRect(250,20,40,140);
	
	ctx.fillRect(320,20,40,140);
	
// canvas da direita
var canvas1 = document.getElementById('quadro1');
var ctx1 = canvas1.getContext('2d');  
 
	ctx1.fillStyle = 'red';
	ctx1.fillRect(40,20,40,140);
ctx1.save()	
	ctx1.fillStyle = 'green';
	ctx1.fillRect(110,20,40,140);
ctx1.save()	
	ctx1.fillStyle = 'blue';
	ctx1.fillRect(180,20,40,140);
ctx1.restore()
	ctx1.fillRect(250,20,40,140);
ctx1.restore()
	ctx1.fillRect(320,20,40,140);
</script>

CSS

	canvas {border:1px solid #ccc;}

HTML

	<canvas id="quadro" width="400" height="200">
		<p>Conteúdo alternativo para navegadores que não suportam canvas.</p>
	</canvas>