0xD34F

При перемещении мыши запоминайте координаты курсора, между предыдущими и текущими координатами рисуйте линии, состоящие из кругов. Координаты кругов вычисляйте с помощью алгоритма Брезенхема, например. Как-то так.

Честно говоря, разбираться, где и как вы ошиблись, особого смысла нет. Потому что избранный вами способ... ну, никто так не делает. Координаты рассчитываются не путём какого-то безумного подбора значений, а исходя из длины маятника и угла поворота. Например:

<button onclick="start()" type="button">Start</button>
<button onclick="stop()">Stop</button>
<canvas width="300" height="300"></canvas>

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const coord = { x: canvas.width / 2, y: canvas.height / 3 };
const length = canvas.width / 3;
const angleMax = 120;
const angleMin = 60;
let angleChange = 1;
let angle = 60;
let active = null;

function stop() {
  active = false;
}

function start() {
  active = true;
  draw();
}

function draw() {
  if (!active) {
    return;
  }

  const { x, y } = coord;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.lineWidth = 5;
  ctx.moveTo(x, y);
  const _a = angle * Math.PI / 180;
  ctx.lineTo(x + length * Math.cos(_a), y + length * Math.sin(_a));

  angle += angleChange;
  if (angle === angleMin || angle === angleMax) {
    angleChange *= -1;
  }

  ctx.stroke();

  requestAnimationFrame(draw);
}

В Network указывается не jpeg, а text/html

Путь неправильный. Или сервер файл не отдаёт. Вы бы посмотрели, что там в этом text/html - должно быть написано.

Ну и зачем тут requestAnimationFrame - я без понятия. Выглядит бредово. Есть же обработчик onload - в нём и рисуйте:

mounted() {
  const img = new Image();
  img.onload = () => this.$refs.canvas.getContext('2d').drawImage(img, 0, 0);
  img.src = '...';
},

https://jsfiddle.net/bd0ro2yL/

Почему? Ну, наверное, потому что это дефолтное значение. Хотите, чтобы был не 0 - вместо рисования прямоугольников чёрт знает где делайте соответствующую трансформацию, а сам прямоугольник рисуйте в (0, 0). Т.е., вместо

rectangle.drawRect(cur_x,cur_y,seg_size,seg_size);

будет

rectangle.drawRect(0, 0, seg_size, seg_size);
rectangle.setTransform(cur_x, cur_y);

const images = [
  {
    src: 'https://i.imgur.com/GigS3KR.png',
    translate: [ 50, 50, 500, 20 ],
    rotate: [ 340, 200 ],
    draw: [ 0, 0, 0.95 ],
  },
  {
    src: 'https://i.imgur.com/y3JAe69.png',
    translate: [ 5, 0, 382, 2 ],
    rotate: [ 630, 40 ],
    draw: [ 150, 100, 0.84 ],
  },
  {
    src: 'https://i.imgur.com/v30JIWp.png',
    translate: [ 8, 150, 198, 3 ],
    rotate: [ 500, 450 ],
    draw: [ 0, 0, 0.7 ],
  },
].map(n => {
  n.draw.unshift(new Image);
  n.draw[0].src = n.src;
  return n;
});

const canvases = document.querySelectorAll('.canvas');
const canvasSize = document.documentElement.clientWidth;

for (const n of canvases) {
  n.setAttribute('width', canvasSize);
  n.setAttribute('height', canvasSize);
}

let ts0;
window.requestAnimationFrame(function draw(ts) {
  for (const n of canvases) {
    ts0 = ts0 || ts;
    const dt = ts - ts0;

    const ctx = n.getContext('2d');
    ctx.clearRect(0, 0, canvasSize, canvasSize);

    for (const { translate: t, rotate: r, draw: d } of images) {
      ctx.save();
      ctx.translate(t[0], t[1] + Math.sin(dt / t[2]) / t[3]);
      ctx.rotate(Math.sin(dt / r[0]) / r[1]);
      ctx.drawImage(d[0], d[1], d[2], canvasSize * d[3], canvasSize * d[3]);
      ctx.restore();
    }
  }

  window.requestAnimationFrame(draw);
});

Ну как бы так:

const cloud = new Image();
cloud.src = 'https://avatanplus.com/files/resources/mid/56dc1ba4ba1b81534bcbfb9a.png';

(function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  ctx.globalCompositeOperation = 'destination-over';
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = 'rgba(0,0,0,0.4)';
  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
  ctx.save();
  ctx.translate(300, 200);

  const time = new Date();
  ctx.rotate(Math.sin(time / 500) / 10);

  ctx.drawImage(cloud, -300, -200);
  ctx.restore();

  window.requestAnimationFrame(draw);
})();

Коэффициенты для изменения скорости и амплитуды - их вы, думаю, сможете подобрать самостоятельно.

Надо внутри цикла заменить translate на rotate. И не забыть сделать translate перед циклом - это чтобы круг был виден целиком. Типа так:

<canvas width="400" height="400"></canvas>

const canvas = document.querySelector('canvas');
const w = canvas.width;
const h = canvas.height;
const ctx = canvas.getContext('2d');

ctx.translate(w / 2, h / 2);
ctx.fillStyle = 'red';

const steps = 30;

for (let i = 0; i < steps; i++) {
  ctx.beginPath();
  ctx.arc(w / 4, h / 4, 5, 0, 2 * Math.PI, false);
  ctx.rotate(2 * Math.PI / steps);
  ctx.fill();
  ctx.closePath();
}

замените

:style="{width: this.width, height: this.cavh}"

на

v-bind="{ width: width, height: cavh }"

или

:width="width" :height="cavh"

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let X, Y;

document.addEventListener('mousemove', function(e) {
  X = e.clientX;
  Y = e.clientY;
});

function drawRect(x, y, w, h) {
  const dx = x + w / 2;
  const dy = y + h / 2;
  const angle = Math.atan2(X - dx, Y - dy);

  ctx.save();
  ctx.translate(dx, dy);
  ctx.rotate(-angle);
  ctx.translate(-dx, -dy);
  ctx.strokeRect(x, y, w, h);
  ctx.restore();
}

function draw() {
  ctx.clearRect(0, 0, innerWidth, innerHeight);
  drawRect(50, 50, 50, 50);
  requestAnimationFrame(draw);
}

draw();

Потому что в методе draw вы полностью очищаете холст перед рисованием объекта, соответственно, увидеть можно только последний. Холст очищать надо один раз - перед тем, как начнёте обходить в цикле объекты для их обновления.

Так?

держите

Я хочу прямо в HTML написать <canvas id="threejs_here"> </canvas> и как-то назначить этот canvas для вывода рендера three.js

Нет проблем. Ставите своему canvas'у ref:

<canvas ref="threejs"></canvas>

И указываете его при создании рендерера:

new THREE.WebGLRenderer({
  canvas: this.$refs.threejs,
})

Как-то так.

У вас переменная degrees одна на всех. Естественно, что всё одинаково рисуется.