Canvas IP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
        class Element{
            constructor(x,y) {
                this.x=x
                this.y=y
            }
        }

        class Pravoagolnik extends Element{
            constructor(x,y,w,h) {
                super(x,y);
                this.w=w
                this.h=h
            }
        }

        class Krug extends Element{

            constructor(x,y,r) {
                super(x, y);
                this.r=r
            }
        }

        $(document).ready(function (){
            let color="black"
            let elements=[]

            $.getJSON("objekti.json",function (data){
                $.each(data, function (key,val){
                    if(String(val['tip'])==="Pravoagolnik"){
                        let x=parseInt(val['x'])
                        let y=parseInt(val['y'])
                        let w=parseInt(val['w'])
                        let h=parseInt(val['h'])
                        elements[elements.length]=new Pravoagolnik(x,y,w,h)
                    }
                    else{
                        let x=parseInt(val['x'])
                        let y=parseInt(val['y'])
                        let r=parseInt(val['r'])
                        elements[elements.length]=new Krug(x, y, r)
                    }
                })
                drawCanvas()
            })
            console.log(elements)

            $('#changeColorButton').click(function (){
                color=$('#colorPicker')[0].value
                console.log(color)
                clearCanvas()
                drawCanvas()
            })

            $('#canvas').click(function (e){
                let xCoord=e.offsetX, yCoord=e.offsetY

                let randomSelect=Math.round(Math.random())
                let newElement
                if(randomSelect===0)
                    newElement=new Pravoagolnik(parseInt(xCoord),parseInt(yCoord),30,30)
                else
                    newElement=new Krug(parseInt(xCoord),parseInt(yCoord), 10)
                elements[elements.length]=newElement
                clearCanvas()
                drawCanvas()
            })

            function clearCanvas(){
                const canvas=$("#canvas")[0]
                const context=canvas.getContext('2d')
                context.clearRect(0,0,canvas.width,canvas.height)
            }

            function drawCanvas(){
                let canvas=document.getElementById("canvas")
                let ctx=canvas.getContext('2d')
                for(let i=0;i<elements.length;i++){
                    let e=elements[i]
                    ctx.beginPath()
                    ctx.fillStyle=color
                    if(e.constructor.name==="Pravoagolnik")
                        ctx.rect(e.x, e.y, e.w, e.h)
                    else
                        ctx.arc(e.x, e.y, e.r, 0, 2.0 * Math.PI,false)

                    ctx.fill()
                }
            }
        })


    </script>
    <noscript><p>This page requires JavaScript support</p></noscript>
</head>
<body>
    <canvas id="canvas" style="border: 1px solid black"></canvas>
    <input id="colorPicker" type="color">
    <button id="changeColorButton">draw</button>
</body>
</html>