---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>
<body>

<canvas id="canvas" width="800" height="650" style="border: 1px solid black;"></canvas>

<script>
    const canvas = document.getElementById("canvas");
    const context = canvas.getContext("2d");

    context.fillRect(10, 10, 100, 100);

    context.strokeRect(130, 10, 100, 100);

    context.fillRect(250, 10, 100, 100);
    context.clearRect(255, 15, 90, 90);

    context.fillRect(370, 10, 80, 80);
    context.clearRect(380, 20, 60, 20);
    context.fillRect(390, 25, 10, 10);
    context.fillRect(420, 25, 10, 10);
    context.clearRect(385, 60, 50, 10);

    context.fillStyle = "#c7ecee";
    context.fillRect(500, 10, 100, 100);

    context.strokeStyle = "#22a6b3";
    context.lineWidth = 4.5;
    context.strokeRect(500, 10, 100, 100);

    context.lineWidth = 2;

    context.strokeStyle = "red";
    context.setLineDash([15, 5]);
    context.strokeRect(10, 150, 100, 100);

    context.strokeStyle = "blue";
    context.setLineDash([2, 5, 6]);
    context.strokeRect(130, 150, 100, 100);

    context.strokeStyle = "green";
    context.setLineDash([2]);
    context.strokeRect(250, 150, 100, 100);

    context.setLineDash([]);

    context.strokeStyle = "red";
    context.lineWidth = 10;

    context.lineJoin = "miter";
    context.strokeRect(10, 300, 100, 100);

    context.lineJoin = "bevel";
    context.strokeRect(130, 300, 100, 100);

    context.lineJoin = "round";
    context.strokeRect(250, 300, 100, 100);

    context.globalAlpha = 1;
    context.fillStyle = "blue";
    context.fillRect(430, 300, 100, 100);

    context.globalAlpha = 0.5;
    context.fillStyle = "red";
    context.fillRect(480, 350, 100, 100);

    context.globalAlpha = 1;

    context.strokeStyle = "black";
    context.lineWidth = 3;
    context.lineJoin = "miter";
    context.setLineDash([]);

    context.beginPath();
    context.moveTo(20, 580);
    context.lineTo(140, 490);
    context.lineTo(260, 580);
    context.stroke();
</script>

</body>
</html><!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>
<body>

<canvas id="canvas" width="800" height="450" style="border: 1px solid black;"></canvas>

<script>
    const canvas = document.getElementById("canvas");
    const context = canvas.getContext("2d");

    context.fillRect(10, 10, 100, 100);

    context.strokeRect(130, 10, 100, 100);

    context.fillRect(250, 10, 100, 100);
    context.clearRect(255, 15, 90, 90);

    context.fillRect(370, 10, 80, 80);
    context.clearRect(380, 20, 60, 20);
    context.fillRect(390, 25, 10, 10);
    context.fillRect(420, 25, 10, 10);
    context.clearRect(385, 60, 50, 10);

    context.fillStyle = "#c7ecee";
    context.fillRect(500, 10, 100, 100);

    context.strokeStyle = "#22a6b3";
    context.lineWidth = 4.5;
    context.strokeRect(500, 10, 100, 100);

    context.lineWidth = 2;

    context.strokeStyle = "red";
    context.setLineDash([15, 5]);
    context.strokeRect(10, 150, 100, 100);

    context.strokeStyle = "blue";
    context.setLineDash([2, 5, 6]);
    context.strokeRect(130, 150, 100, 100);

    context.strokeStyle = "green";
    context.setLineDash([2]);
    context.strokeRect(250, 150, 100, 100);

    context.setLineDash([]);

    context.strokeStyle = "red";
    context.lineWidth = 10;

    context.lineJoin = "miter";
    context.strokeRect(10, 300, 100, 100);

    context.lineJoin = "bevel";
    context.strokeRect(130, 300, 100, 100);

    context.lineJoin = "round";
    context.strokeRect(250, 300, 100, 100);
</script>

</body>
</html>