JS:Joonistamine

<h1>Minu JS majake</h1>
<canvas id="pyhi" width="400" height="300"></canvas>
<input type="button" value="maja" onclick="maja()">
<input type="button" value="maja2" onclick="maja2()">
<input type="button" value="kustuta" onclick="kustuta()">

<script>
function kustuta() {
    const pyhi = document.getElementById("pyhi");
    if (pyhi.getContext) {
        let p = pyhi.getContext("2d");
        p.clearRect(0, 0, 400, 300);
    }
}
function maja(){
    const pyhi = document.getElementById("pyhi");
    if (pyhi.getContext) {
        let t = pyhi.getContext("2d");
        t.fillStyle="red"
        t.fillRect(130, 115, 150, 130);

        t.beginPath();
        t.arc(209, 182 , 50 , 0 ,2 * Math.PI, true);
        t.strokeStyle="red";
        t.stroke()
        t.fillStyle="yellow"
        t.fill();

        t.beginPath();
        t.lineWidth = "1";
        t.moveTo(130, 115);
        t.lineTo(208, 15);
        t.lineTo(283, 115);
        t.lineTo(130, 115);
        t.strokeStyle  = "red";
        t.fillStyle = "black";
        t.fill();



}
}
function maja2(){
    const pyhi = document.getElementById("pyhi");
    if (pyhi.getContext) {
        let p = pyhi.getContext("2d");
        p.fillStyle="green"
        p.fillRect(1, 265, 398, 32);

        p.beginPath();
        p.arc(366, 22 , 20 , 0 ,2 * Math.PI, true);
        p.strokeStyle="yellow";
        p.stroke()
        p.fillStyle="yellow"
        p.fill();

        p.beginPath();
        p.lineWidth = "10";
        p.moveTo(310, 85);
        p.lineTo(326, 68);
        p.lineTo(342, 53);
        p.lineTo(310, 85);
        p.strokeStyle  = "red";
        p.fillStyle = "yellow";
        p.fill();




    }
}
</script>

body{
    font-family: Arial;/*fondi tüüp*/
    color: green; /*teksti värv*/
}
h1{
    border: solid 1px green;
    padding: 10%;
    margin: 8px;
    border-radius: 50px;
    width: 55%;
    background-color: white;
}
h2{
    border: dotted 2px green;
    padding: 1%;
    margin: 8px;
    border-radius: 50px;
    width: 55%;
    background-color: white;
}
ul{
    list-style-type: circle; /*square */
    padding: 5px;
    background-color: white;
}
ul li{
    background-color: sandybrown;
    margin: 3px;
}
table{
    width: 55%;
    border:solid 1px green;
    text-align: center; /*teksti joondamine keskele*/
    background-color: sandybrown;
}