Editor

Pregled code-a:

<!DOCTYPE HTML>
<html lang="hr">
<head>
<meta charset="UTF-8">
<title>CANVAS - Translate</title>
<script>
var can, ctx;

function init() {
 can = document.getElementById('kan1');
 if (can.getContext) {
  ctx = can.getContext('2d');
  
  //original pravokutnik
  drawRect('red');
  
  //smanjeni pravokutnik
  ctx.translate(150,80);
  ctx.scale(0.38,0.38);
  ctx.translate(-150,-80);
  drawRect('green');
  
 }
 else document.getElementById('kan11')
              .innerHTML='Vaš browser ne podržava CANVAS tag!';
}

function drawRect(strokeColor) {
 ctx.strokeStyle = strokeColor;
 ctx.strokeRect(100,50, 100,60);
}

window.onload=init;
</script>
</head>
<body>
 
Originalni pravokutnik (crveni) je smanjen sa scale() metodom pa je dobiven
zeleni pravokutnik. Zelenom i crvenom pravokutniku se poklapaju centri jer je upotrijebljeno:

 ctx.translate(150,80);
 ctx.scale(0.38,0.38);
 ctx.translate(-150,-80);

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

</body>
</html>

Pregled stranice:

Pogledaj stranicu ../html/html5canvas/primjeri/48scale_translate.html.