<!DOCTYPE html>
<html>
<head>
<title>translate : 위치 이동</title>
<style type="text/css">
#myCanvas { border:1px solid red; }
</style>
<script src="Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var ctx = document.getElementById('myCanvas').getContext('2d');
// 사각형 그리기
ctx.fillStyle = "rgb(255, 255, 0)";
ctx.translate(150, 150); // 오른쪽으로 150, 아래쪽으로 150 이동
ctx.fillRect(0, 0, 100, 100); // 100 픽셀짜리 사각형 그리기
// 3개의 사각형 그리기
for (var i = 0; i < 3; i++) {
ctx.save(); // 원점 정보 저장
ctx.fillStyle = "rgb(0, 255, 255)";
ctx.translate(100 * i, 100 * i);
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // 원점으로 복귀
}
});
</script>
</head>
<body>
<canvas id="myCanvas" width="640" height="480"></canvas>
</body>
</html>
실행 결과 : IE9에서 출력
