CODEWITHSUNDEEP
javascripthtmltypescriptcanvas
Milind Modi
Milind Modi

Reputation: 321

How to transalate hexagon in canvas html using typescript

i drew a hexagon on canvas in html and i want to tranaslate the hexagon in canvas when i use a translate method it doesn't translate the hexagon but when i translate it does translate when i use the rectangle .

var canvas:HTMLCanvasElement = document.getElementById("myCanvas"); var context:CanvasRenderingContext2D = canvas.getContext("2d");

var x  =  300;
var y =  100;

context.beginPath();
context.moveTo(x, y);
x = x + 120;
y = y + 100;
context.lineTo(x, y);  

y = y + 120;
context.lineTo(x, y); 

x = x - 125;
y = y + 100;
context.lineTo(x, y); 

x = x - 125;
y = y - 100;
context.lineTo(x, y); 

y = y - 120;
context.lineTo(x, y); 

x = x + 130;
y = y - 100;
context.lineTo(x, y);
context.strokeStyle = "red";
context.lineWidth = 4;  
context.fillStyle = "blue";
context.fill(); 

context.translate(400,400);
context.fillStyle = "blue";
context.fill(); 
context.save(); 

context.fillRect(10, 10, 100, 50);
    context.translate(70, 70);
    context.fillRect(10, 10, 100, 50);

Edit 1: according to the @helder gave the answer I've made the changes but translate is not working

function hexagon(x:number, y:number, r:number, color:string) {
  context.beginPath();
  var angle = 0
  for (var j = 0; j < 6; j++) {
    var a = angle * Math.PI / 180
    var xd = r * Math.sin(a)
    var yd = r * Math.cos(a)
    context.lineTo(x + xd, y + yd);
    angle += 360 / 6
  }
  context.fillStyle = color;
  context.fill();
  context.translate(70,70);
  context.fill();
}

hexagon(100, 100, 50, "red")

Upvotes: 1

Views: 263

Answers (1)

Helder Sepulveda
Helder Sepulveda

Reputation: 17594

I would try to create a function that draws the hexagon that way you don't have to use translate.

See below

c = document.getElementById("canvas");
context = c.getContext("2d");

function hexagon(x, y, r, color) {
  context.beginPath();
  var angle = 0
  for (var j = 0; j < 6; j++) {
    var a = angle * Math.PI / 180
    var xd = r * Math.sin(a)
    var yd = r * Math.cos(a)
    context.lineTo(x + xd, y + yd);
    angle += 360 / 6
  }
  context.fillStyle = color;
  context.fill();
}

hexagon(50, 50, 30, "red")
hexagon(40, 40, 10, "blue")
hexagon(60, 60, 10, "lime")
<canvas id=canvas >

Here is a break down of function hexagon(x, y, r, color)

  • it takes the center of the hexagon (x,y) a radius (r) and color
  • we loop over the six vertices and draw lines
  • the calculations are just a bit of trigonometry nothing fancy

With that we can draw hexagons at any location we want.
and that same function you can easily refactor to draw an octagon or other polygons.

Here is an animated version of those hexagons 

c = document.getElementById("canvas");
context = c.getContext("2d");
delta = 0

function hexagon(x, y, r, color) {
  context.beginPath();
  var angle = 0
  for (var j = 0; j < 6; j++) {
    var a = angle * Math.PI / 180
    var xd = r * Math.sin(a)
    var yd = r * Math.cos(a)
    context.lineTo(x + xd, y + yd);
    angle += 360 / 6
  }
  context.fillStyle = color;
  context.fill();
}

function draw() {
  context.clearRect(0, 0, c.width, c.height)
  var xd = 10 * Math.sin(delta)
  var yd = 10 * Math.cos(delta)
  hexagon(50 - xd, 50 - yd, 30, "red")
  hexagon(40 + xd, 40 + yd, 10, "blue")
  delta += 0.2
}

setInterval(draw, 100);
<canvas id=canvas>

As you can see there is no need to use translate

Upvotes: 1

Related Questions