Помогите понять Canvas

[Dilettante_Pro]

MC-XOBAHCK,
Насчет вращения:
Перед и после строки 35 впишите

     strelka.translate(x,y);
35   strelka.rotate((Math.PI / 180) * deg);
     strelka.translate(-x,-y);

[MC-XOBAHCK]

Dilettante_Pro, СПАСИБО! Код поправил. Теперь при повороте без смещения.
Теперь понял как это работает. Это типо как в CSS с абсолютным позиционированием - топ/лефт 50%, а потом по минус 50% от маржинов и мы по центру.

[Dilettante_Pro]

MC-XOBAHCK,
Просто центр вращения надо задать.

[MC-XOBAHCK]

И баг похоже нашёл.
Поставил

console.log(v);

Результат:
["0", "0", "0400", "0", "030", -3, "0", "0", "030", "03", 370, -3, "0400", "0", 370, "03"]

console.log(typeof v[15]);

Результат: string

Наслаживал...

[Dilettante_Pro]

И баг похоже нашёл.

Да, плюсики... Хотел было написать - но вы и сами справились!

[MC-XOBAHCK]

Относительно стрелок получается что:
1. Размер: меньше, нормально, больше - это масштаб
2. Ориентация: горизонтально, вертикально - это поворот
3. Появился новый пункт - это перемещение origin

Я вроде два из трёх пункта реализовал (разумеется не без посторонней помощи). Идея правильная.
А вот с масштабированием - наверное в моём случае с размерными стрелками оно не нужно. У меня толщина линии одна и та же, и делать толще её не нужно. Просто при малых размерах сами указатели стрелок меняются (поставил условие через свич на длину стрелки), чтобы допустим при 60px длины стрелки указатели не съехались, а визуально оставалась стрелочка.
Параметры свича я со временем подгоню.

Против функции ничего не имею, если честно - я её пока не понимаю и не могу внедрить. Я вон канвас только пару дней назад для себя открыл.

[MC-XOBAHCK]

Добрый день!
А можете подсказать, возможно ли сделать скачивание canvasa?
В контекстном меню браузера, если навести курсор на канвас и нажать правую кнопку мышки, есть пункт "Сохранить картинку как...".
А можно ли это как то повесить на кнопку?

<canvas style="border:1px solid black"></canvas>
<button id="download">Скачать</button>

<script>
  const canvas = document.querySelector('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
  }

// Скачать Canvas
document.querySelector('#download').addEventListener('click', function ( ) {
    //?????
})
</script>

[j0hnik]

<canvas style="border:1px solid black"></canvas>
<a href="" download="my-file-name.png" href="#"><button id="download">Download</button></a>

<script>
  const canvas = document.querySelector('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
  }

// Скачать Canvas
document.querySelector('#download').addEventListener('click', function(){
    var dataURL = canvas.toDataURL('image/png');
    document.querySelector('a').href = dataURL;
});
</script>

[MC-XOBAHCK]

j0hnik, спасибо за решение.
Скачал с вашего решения - работает.
У меня же скачивает пустой файл. Может быть причина из за того что у меня на локалке, а не на cервере?

Думал может из за того что у меня канвас генерируется, исправил код на всплытие но не помогло:

<div class="editor">
    <canvas></canvas>
    <a href="" download="my-file-name.png" href="#">
        <button id="download">Скачать</button>
    </a>
</div>

Скрипт:

document.querySelector('.editor').addEventListener('click', function (event) {
    if (event.target.id == 'download') {
        let canvas = event.target.parentNode.parentNode.querySelector('canvas');
        var dataURL = canvas.toDataURL('image/png');
        document.querySelector('a').href = dataURL;
    }
})

[j0hnik]

У меня же скачивает пустой файл. Может быть причина из за того что у меня на локалке, а не на cервере?

Это вряд ли. в ФФ тоже не пашет?