Untitled

<!doctype html>
<html lang="pl-PL">

<head>
    <title>Index</title>
    <meta charset="utf-8">
<style>
    .eszkere {
        text-align: center;
    }

    .eszkere h1, h2 {
        font-family: Helvetica;
    }

    .eszkere h1 {
        font-size: 45px;
    }

    .eszkere h1:first-letter, h2::first-letter {
        color: red;
    }

    #rysowanie {
        border: 1px solid black;
        position: absolute;
        margin: 0 auto;
        bottom: 25%;
        right: 25%;

    }
</style>
</head>

<body>
    <div class="eszkere">
        <br>
        <h1>Canvas</h1>
        <h2>Rysowanie w JavaScript</h2>
        <hr>
        <canvas id="rysowanie" width="1000" height="500"></canvas>
    </div>

<script id="kwadrat">
var c = document.getElementById("rysowanie");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "gray";
ctx.fillRect(700, 20, 150, 150);
ctx.fill();
ctx.strokeStyle = "red";
ctx.lineWidth = 5;
ctx.strokeRect(700, 20, 150, 150);
ctx.fillStyle = "black";
ctx.font = "100px Arial";
ctx.fillText("I", 743, 125);
</script>

<script id="kolo">
var c = document.getElementById("rysowanie");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(90,90,80,0,10*Math.PI);
ctx.strokeStyle="red";
ctx.lineWidth = 10;
ctx.stroke();
ctx.fillStyle= "gray";
ctx.fill();
ctx.fillStyle = "black";
ctx.font = "100px Arial";
ctx.fillText("F", 60, 120);

</script>

<script id="prostokat">
var c = document.getElementById("rysowanie");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rotate(Math.PI / 0);
ctx.rect(300, 20, 250, 150);
ctx.fillStyle = "gray";
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.stroke();
ctx.fillStyle = "black";
ctx.font = "100px Arial";
ctx.fillText("B", 390, 130);

</script>
</body>
</html>