Untitled

<!DOCTYPE html>
<html>
<head>
    <script>
    function draw1(){
            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');

            context.save();
            context.translate(400,0);
            context.fillRect(0,0,100,100);
            context.restore();
            context.save();
            context.translate(0,400);
            context.fillRect(0,0,100,100);
            context.restore();
            context.save();
            context.translate(400,400);
            context.fillRect(0,0,100,100);
            context.restore();
            context.save();
            context.translate(0,0);
            context.fillRect(0,0,100,100);
            context.restore();
            context.beginPath();
            context.arc(250,250,25,2*Math.PI,0);
            context.closePath();
            context.stroke();
    }

    function draw2(){
            var canvas = document.getElementById('myCan');
            var ctx = canvas.getContext('2d');
            var w = canvas.offsetWidth -2;
            var h = canvas.offsetWidth -2;
            alert("Wymiary płótna szachownicy: "+w+" x "+h);
            var szerokoscPola=Math.floor(w/8);
            var dlugoscPola=Math.floor(h/8);
            var wiersz=0;
            var krok=0;
            while(wiersz<h)
            {
                if(krok%2==0)
                {
                    for (i=0; i<w; i=i+szerokoscPola*2)
                    {
                        ctx.fillRect(i,wiersz,szerokoscPola,dlugoscPola)
                    }
                }
                else
                {
                    for (i=0; i<w; i=i+szerokoscPola*2)
                    {
                        ctx.fillRect(i+szerokoscPola,wiersz,szerokoscPola,dlugoscPola)
                    }
                }

                wiersz=wiersz+dlugoscPola;
                krok++;
            }
    }
    </script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCan" width="1000" height="500" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
<script>draw1();draw2();</script>
    <form>
        <input id="szer" type="text" placeholder="Podaj szerokość"><br/>
        <input id="dlug" type="text" placeholder="Podaj długość">
        <input id="submit" type="button" value="Rysuj!">
    </form>

</body>
</html>