CODEWITHSUNDEEP
javascriptcanvas
Dennis Braun
Dennis Braun

Reputation: 259

Canvas figures moves to the right side

Here is the code:

$(document).ready(function() {
  var canvas = $("#canvas")[0];
  var context = canvas.getContext("2d");
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  polygon(context, 120, 120, 50, 12);
  context.stroke();
})

function polygon(ctx, x, y, radius, sides) {
  if (sides < 3) return;
  var a = ((Math.PI * 2) / sides);
  ctx.beginPath();
  ctx.translate(x, y);
  ctx.moveTo(radius, 0);
  for (var i = 1; i < sides; i++) {
    ctx.lineTo(radius * Math.cos(a * i), radius * Math.sin(a * i));
  }
  ctx.closePath();
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<canvas id="canvas">OOPS.. Upgrade your Browser</canvas>

This code works fine. BUT each of my polgon appears at wrong place. For example I call 

polygon(context, 120,120,50,12);

and

polygon(context, 120,220,50,12);

and the second polygon appears at x=220, y=220

I mean, they moves in the right side, but they should appear one under another with the same x coordinates.

Upvotes: 2

Views: 72

Answers (4)

stanosky
stanosky

Reputation: 61

I think it happens because of:

ctx.translate(x, y);

If you look closely at HTML canvas translate() Method Definition and Usage you will see that translate() method remaps the (0,0) position of the canvas instead of setting starting point for your drawing. So if you do function call like this:

ctx.translate(120, 120);
ctx.translate(120, 220);

You actually moving registration point of canvas twice. First time it will be moved by (120,120) and later it will be moved by (120,220), so your first polygon will be drawed correctly but the second will be drawed on position (240,340), because coordinates of both starting points will eventually be summed.

Upvotes: 1

Freeman Lambda
Freeman Lambda

Reputation: 3655

You are using the same 2d context over and over for your polygons. The context will save the state of your translations, so consecutive translations add up. You could "revert" the effect of translations by translating with same-negative-values at the end of each polygon call.

$(document).ready(function() {
  var canvas = $("#canvas")[0];
  var context = canvas.getContext("2d");
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  polygon(context, 120, 120, 50, 12);
  context.stroke();
  polygon(context, 120, 220, 50, 12);
  context.stroke();
})

function polygon(ctx, x, y, radius, sides) {
  if (sides < 3) return;
  var a = ((Math.PI * 2) / sides);
  ctx.beginPath();
  ctx.translate(x, y);
  ctx.moveTo(radius, 0);
  for (var i = 1; i < sides; i++) {
    ctx.lineTo(radius * Math.cos(a * i), radius * Math.sin(a * i));
  }
  ctx.closePath();
  ctx.translate(-1 * x, -1 * y);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<canvas id="canvas">OOPS.. Upgrade your Browser</canvas>

Upvotes: 0

krisz
krisz

Reputation: 2696

Reset the translation matrix to the identity matrix before drawing each shape:

context.setTransform(1, 0, 0, 1, 0, 0);

Upvotes: 1

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23379

After drawing the shape you need to translate it back to the original position so the next shape is drawn from the same relative location as the first.

ctx.translate(-x, -y);


$(document).ready(function() {
  var canvas = $("#canvas")[0];
  var context = canvas.getContext("2d");
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  polygon(context, 120, 120, 50, 12);
  context.stroke();
  polygon(context, 120,220,50,12);
  context.stroke();
})

function polygon(ctx, x, y, radius, sides) {
  if (sides < 3) return;
  var a = ((Math.PI * 2) / sides);
  ctx.beginPath();
  ctx.translate(x, y);
  ctx.moveTo(radius, 0);
  for (var i = 1; i < sides; i++) {
    ctx.lineTo(radius * Math.cos(a * i), radius * Math.sin(a * i));
  }
  ctx.closePath();
  ctx.translate(-x, -y);
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<canvas id="canvas">OOPS.. Upgrade your Browser</canvas>

Upvotes: 2

Related Questions