Editor

Pregled code-a:

<!DOCTYPE HTML>
<html lang="hr">
<head>
<meta charset="UTF-8">
<title>CANVAS - save , restore</title>

function init() {
 can = document.getElementById('kan1');
 if (can.getContext) {
  ctx = can.getContext('2d');
  
  //save -> sprema crveno
 ctx.save();
 ctx.fillStyle = "red";
 ctx.fillRect(5,20, 130,80);
 
 //bez save i restore -> ostaje crveno
 ctx.fillRect(140,20, 130,80);
 
 //drugo save -> sprema zeleno
 ctx.save();
 ctx.fillStyle = "green";
 ctx.fillRect(275,20, 130,80);
 
 //restore -> vraca na crveno
 ctx.restore();
 ctx.fillRect(410,20, 130,80);
 
 //restore -> vraca na crno tj. predefiniranu boju canvasa
 ctx.restore();
 ctx.fillRect(545,20, 130,80);
  
 }
 else document.getElementById('kan11')
              .innerHTML='Vaš browser ne podržava CANVAS tag!';
}

window.onload=init;
 
</script>

</head>
<body>
    
<canvas id="kan1" width="750" height="120" style="border:1px solid #DDDDDD;">
 Vaš browser ne podržava CANVAS element!
</canvas>

Pregled stranice:

Pogledaj stranicu ../html/html5canvas/primjeri/55save_restore.html.