Canvas

Як вставити відео з Ютуб інструкція:

1. Відкриваєм відео в Ютуб та тиснем "Поделится
2. Тиснем кнопочку "Встроить"

Lesson відео YouTube

Canvas базові фігури

       ==== Setup ======
    const canv = document.getElementById("canvas");
    const ctx = canv.getContext("2d");
    canv.width = window.innerWidth;
    canv.height = window.innerHeight;
        або
    canv.width = 500;
    canv.height = 260;

        === Малюєм квадрат ===
    ctx.fillStyle = "magenta";
    ctx.fillRect(20, 10, 30, 20); // Coord, Lat, Lon

        === transform ===
    // ctx.scale(1.5, 1.5);
    // ctx.rotate(10 * Math.PI / 180);

        ===== Малюєм круг =====
    ctx.beginPath();
    ctx.arc(100, 100, 30, 0, Math.PI * 2) // 
    ctx.fillStyle = "black";
    ctx.fill();

    ===== Малюєм трикутник =====
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 5;
    ctx.beginPath();
    ctx.moveTo(60, 140);
    ctx.lineTo(30, 200);
    ctx.lineTo(90, 200);
    ctx.closePath();        // same
    // ctx.lineTo(60, 140); // same
    ctx.stroke();

Реальний приклад

Browser not seport canvas

Canvas малювання

Як користуватися

1. Видалити з localStorage "coords"
2. Почати малювати мишкою на полі
3. Насиснути клавішу "S" Save
4. Насиснути клавішу "С" Очистити
5. Насиснути клавішу "R" повторити малюнок

Реальний приклад

Browser not seport canvas