Как для canvas задать границы?

Question

[Alexander3928]

Можно ли как-то задать стили для canvas, чтобы было как с права? ${border}px ${lineBorder} #22222280;

let  border = 5,
       lineBorder = 'solid';

const saveImage = () => {
  const canvas = sampleElement('canvas');
  const ctx = canvas.getContext('2d');
  
  canvas.width = document.querySelector('.edit-preview img').naturalWidth;
  canvas.height = document.querySelector('.edit-preview img').naturalHeight;

  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.lineWidth = border;
  ctx.strokeStyle = '#22222280';
  ctx.stroke();

  ctx.drawImage(document.querySelector('.edit-preview img'), -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
 
  document.body.appendChild(canvas);
}

Comments

[RAX7]

https://developer.mozilla.org/ru/docs/Web/API/Canv...
https://developer.mozilla.org/ru/docs/Web/API/Canv...

[Alexander3928]

RAX7, canvas не добавляет границу из-за ctx.translate. Проблема есть с этим. Если использовать ctx.translate, тогда границы не будет , но картинка будет не обрезаная. И наоборот если без ctx.translate. Это можно как-то исправить, чтобы изображение не было обрезаное и с границей?
https://codepen.io/Alexxxsander/pen/LYdvdxX

[RAX7]

Alexander3928,

const saveImage = () => {
  const image = document.querySelector("img");
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  canvas.width = 300;
  canvas.height = 200;
  
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  ctx.lineWidth = 5;
  ctx.strokeStyle = "red";
  ctx.strokeRect(0, 0, canvas.width, canvas.height);
  document.body.appendChild(canvas);
};

saveImage();

либо

const saveImage = () => {
  const image = document.querySelector("img");
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  canvas.width = 300;
  canvas.height = 200;

  ctx.translate(canvas.width / 2, canvas.height / 2);

  ctx.drawImage(
    image,
    -canvas.width / 2,
    -canvas.height / 2,
    canvas.width,
    canvas.height
  );

  ctx.lineWidth = 5;
  ctx.strokeStyle = "red";
  ctx.strokeRect(
    -canvas.width / 2,
    -canvas.height / 2,
    canvas.width,
    canvas.height
  );

  document.body.appendChild(canvas);
};

saveImage();

[Alexander3928]

RAX7, Отправь как ответ, отмечу

Answer 1

[RAX7]

const saveImage = () => {
  const image = document.querySelector("img");
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  canvas.width = 300;
  canvas.height = 200;
  
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  ctx.lineWidth = 5;
  ctx.strokeStyle = "red";
  ctx.strokeRect(0, 0, canvas.width, canvas.height);
  document.body.appendChild(canvas);
};

saveImage();

либо

const saveImage = () => {
  const image = document.querySelector("img");
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  canvas.width = 300;
  canvas.height = 200;

  ctx.translate(canvas.width / 2, canvas.height / 2);

  ctx.drawImage(
    image,
    -canvas.width / 2,
    -canvas.height / 2,
    canvas.width,
    canvas.height
  );

  ctx.lineWidth = 5;
  ctx.strokeStyle = "red";
  ctx.strokeRect(
    -canvas.width / 2,
    -canvas.height / 2,
    canvas.width,
    canvas.height
  );

  document.body.appendChild(canvas);
};

saveImage();