function ring(){
    const t = document.getElementById("tahvel");
    if (t.getContext){
        let ctx = t.getContext("2d"); // Используем переменную ctx
        ctx.beginPath();
        ctx.arc(50,50,30,0,2 * Math.PI, true);
        ctx.strokeStyle="lightcoral";
        ctx.stroke();
        ctx.fillStyle="blue";
        ctx.fill();
    }
}

function kutsuta(){
    const t = document.getElementById("tahvel");
    if (t.getContext){
        let ctx = t.getContext("2d");
        ctx.clearRect(20,20,64,64);
    }
}

function ristkylik(){
    const t = document.getElementById("tahvel");
    if (t.getContext){
        let ctx = t.getContext("2d");
        ctx.fillStyle="red";
        ctx.fillRect(50,100,100,120);
    }
}

function joon(){
    const t = document.getElementById("tahvel");
    if (t.getContext){
        let ctx = t.getContext("2d");
        ctx.beginPath();
        ctx.lineWidth= "5";
        ctx.moveTo(50,60);
        ctx.lineTo(200,100);
        ctx.strokeStyle="red";
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(50,60);
        ctx.lineTo(200,100);
        ctx.lineTo(125,150);
        ctx.closePath();
        ctx.fillStyle = "blue";
        ctx.fill();
    }
}

function eesti(){
    const l = document.getElementById("lipp");
    if (l.getContext){
        let ctx = l.getContext("2d");
        ctx.fillStyle="blue";
        ctx.fillRect(0,0,330,70);
        ctx.fillStyle="black";
        ctx.fillRect(0,70,330,140);
        ctx.fillStyle="white";
        ctx.fillRect(0,140,330,210);
    }
}

function jaapan(){
    const l = document.getElementById("lipp");
    if (l.getContext){
        let ctx = l.getContext("2d");
        ctx.fillStyle="white";
        ctx.fillRect(0, 0, 330,210);
        ctx.fillStyle="red";
        ctx.beginPath();
        ctx.arc(165,105,50,0,2 * Math.PI, true);
        ctx.fill();
    }
}

function ukraina(){
    const l = document.getElementById("lipp");
    if (l.getContext){
        let ctx = l.getContext("2d");
        ctx.fillStyle="blue";
        ctx.fillRect(0,0,330,105);
        ctx.fillStyle="yellow";
        ctx.fillRect(0,105,330,105);
    }
}

function venemaa(){
    const l = document.getElementById("lipp");
    if (l.getContext){
        let ctx = l.getContext("2d");
        ctx.fillStyle="white";
        ctx.fillRect(0,0,330,70);
        ctx.fillStyle="blue";
        ctx.fillRect(0,70,330,70);
        ctx.fillStyle="red";
        ctx.fillRect(0,140,330,70);
    }
}

function itaalia(){
    const l = document.getElementById("lipp");
    if (l.getContext){
        let ctx = l.getContext("2d");
        ctx.fillStyle="green";
        ctx.fillRect(0,0,110,210);
        ctx.fillStyle="white";
        ctx.fillRect(110,0,110,210);
        ctx.fillStyle="red";
        ctx.fillRect(220,0,110,210);
    }
}

function india(){
    const l = document.getElementById("lipp");
    if (l.getContext){
        let ctx = l.getContext("2d");
        ctx.fillStyle="orange";
        ctx.fillRect(0,0,330,70);
        ctx.fillStyle="white";
        ctx.fillRect(0,70,330,70);
        ctx.fillStyle="green";
        ctx.fillRect(0,140,330,70);
        ctx.fillStyle="blue";
        ctx.beginPath();
        ctx.arc(165,105,50,0,2 * Math.PI, true);
 

canvas#tahvel{
    width: 40%;
    background-color: lightcoral;
    border: 1px solid black;
}
canvas#lipp{
    border: 1px solid black;
}