Размеры в холсте html5

Question

У меня есть проблема с HTML5 Canvas. Я использую jCanvas для добавления слоев на холст, но у меня проблема с размерами.

У меня есть 2 прямоугольника: зеленый и красный. Теперь я хочу, чтобы красная коробка коснулась зеленого левого верхнего угла.

Используя систему координат, я начинаю зеленый с координат 200, 200, затем красный должен начинаться с 0,0, а ширина и высота должны быть 200 и 200. Но это не работает

Проверьте этот пример

Почему это не работает?

Когда я использую размеры 100x100, это работает

Answer 1

Все зависит от происхождения вашего слоя. По умолчанию это центр слоя. Таким образом, чтобы получить ожидаемые результаты, есть два решения (примеры со слоем 100*100):

Сначала в вашем случае вы должны рассчитать правильную позицию от верхнего левого начала холста до середины вашего объекта:

$('canvas')
.addLayer({
  type: 'rectangle',
  name: 'redBox',
  fillStyle: '#c33',
  x: 50, y: 50,//canvas origin to center (100/2)
  width: 100, height: 100
})
.addLayer({
  type: 'rectangle',
  name: 'greenBox',
  fillStyle: '#585',
  x: 150, y: 150,//canvas origin to center (100 of red layer + 100/2)
  width: 100, height: 100
})
.drawLayers();

Или вы можете установить начало координат в верхнем левом углу, отключив свойство fromCenter:

$('canvas')
.addLayer({
  type: 'rectangle',
  name: 'redBox',
  fillStyle: '#c33',
  fromCenter: false,
  x: 0, y: 0,
  width: 100, height: 100
})
.addLayer({
  type: 'rectangle',
  name: 'greenBox',
  fillStyle: '#585',
  fromCenter: false,
  x: 100, y: 100,
  width: 100, height: 100
})
.drawLayers();

Надеюсь это поможет