Как изменить форму холста самостоятельно?

Question

Я работаю над проектом и использую createCapture (ВИДЕО); используя библиотеки p5js, чтобы получить видео с помощью моей веб-камеры. Затем я сохраняю каждое изображение этого захвата (из элемента ) и рисую его на холсте в функции draw ().

Мне было интересно, возможно ли изменить форму холста (например, зеркала (овал или круг)).

Опять же, обратите внимание, что я не хочу обрезать изображение, а сам холст.

Вот код:

function setup(){

   canvas = createCanvas(640, 480); //480p
   canvas.parent('editedCanvas-container');

   originalCapture = createCapture(VIDEO);
   originalCapture.parent('originalVideo-container');
   originalCapture.size(640, 480); //480p
}

function draw(){

   frame = image(originalCapture, 0, 0, width, height);
}

Если у кого-то есть подсказка, пожалуйста, дайте мне знать.

Answer 1

Вы можете изменить форму вашего тега canvas, применив правила CSS,

Так что попробуйте этот код CSS

#canvasObject {
  border: 2px solid black;
  width: 200px;
  height: 150px;
  border-radius: 100px / 50px;
}

<canvas id="canvasObject">
</canvas>

Для получения дополнительной информации о том, как создавать фигуры в CSS, пожалуйста, обратитесь к этому удивительному сообщению для css-tricks