• Нужно продублировать круг, но когда я делаю это, то выходит какая-то дичь, почему?

    IninsaY
    @IninsaY Автор вопроса
    Когда я начинаю рисовать на других канвасах, то расположение первого слетает, и остаётся 1 круг.
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Вёрстка по псд</title>
    	<link rel="stylesheet" href="style.css">
    	<style>
    		.a1 {
    			height: 300px;
    		}
    		.a2 {
    			font-size: 50px;
    			font-family: Bold;
    			color: white;
    			text-align: center;
    			line-height: 0.5em;
    			margin-top: 125px;
    		}
    		.a3 {
    			color: darkblue;
    			text-align: center;
    			font-family: Bold;
    			line-height: 0em;
    		}
    		.a4	{
    			margin-left: 630px;
    			margin-top: -220px;
    			size: 500px;
    		}
    		.a5 {
    			width: 180px;
    			height: 30px;
    		}
    		.a6 {
    			background-color: orange;
    			color: white;
    			border-color: orange;
    			height: 35px;
    		}
    		.a7 {
    			color: white;
    			font-family: Bold;
    			margin-left: 610px;	
    			margin-top: 300px;
    			word-spacing: 15px;
    			position: relative;
    		}	
    		.a8 {
    			margin-left: 550px;
    			margin-top: -140px;
    		}
    		.a9 {
    			margin-left: 600px;
    			margin-top: -150px;
    		}
    		.a10 {
    			margin-left: 650px;
    			margin-top: -150px;
    		}
    	</style>
    	<script> 
      		window.onload = function() {
       		var drawingCanvas = document.getElementById('circle1');
       	 	if(drawingCanvas && drawingCanvas.getContext) {
       	 	var context = drawingCanvas.getContext('2d');
         	// Рисуем окружность 
         	context.strokeStyle = "#538ec2";
         	context.fillStyle = "#538ec2";
         	context.beginPath();
         	context.arc(100,100,50,0,Math.PI*2,true);
         	context.closePath();
        	 context.stroke();
        	 context.fill();
        		}
      	 	}
      	 	  		window.onload = function() {
       		var drawingCanvas = document.getElementById('circle2');
       	 	if(drawingCanvas && drawingCanvas.getContext) {
       	 	var context = drawingCanvas.getContext('2d');
         	// Рисуем окружность 
         	context.strokeStyle = "#538ec2";
         	context.fillStyle = "#538ec2";
         	context.beginPath();
         	context.arc(100,100,50,0,Math.PI*2,true);
         	context.closePath();
        	 context.stroke();
        	 context.fill();
        		}
      	 	}
      	 	  		window.onload = function() {
       		var drawingCanvas = document.getElementById('circle3');
       	 	if(drawingCanvas && drawingCanvas.getContext) {
       	 	var context = drawingCanvas.getContext('2d');
         	// Рисуем окружность 
         	context.strokeStyle = "#538ec2";
         	context.fillStyle = "#538ec2";
         	context.beginPath();
         	context.arc(100,100,50,0,Math.PI*2,true);
         	context.closePath();
        	 context.stroke();
        	 context.fill();
        		}
      	 	}
      </script>
    </head>
    <body>
     	<div class="a1">
     		<h1 class= "a2">COMING   SOON</h1>
     		<p class="a3">SUBCRIBE TO GET NOTIFED ON UPDATES</p>
     	</div>
     	<div>
     		<form action="input1.php" name="test" method="post" class="a4">
     			<input class="a5" type="email" name="email" placeholder ="Type your e-mail adress">
     			<input class="a6" type="submit" value="Subscribe">
     		</form>
    	</div>
    	<div class="a7">
    		<h1>DAYS HOURS MINS</h1>
    	</div>
    	<div class="a8">
    		<canvas id="circle1" width="180" height="180">
        		<p>Ваш браузер не поддерживает рисование.</p>
      		</canvas>
      	</div>
      	<div class="a9">
    		<canvas id="circle2" width="250" height="250">
        		<p>Ваш браузер не поддерживает рисование.</p>
      		</canvas>
      	</div>
      	<div class="a10">
    		<canvas id="circle3" width="200" height="200">
        		<p>Ваш браузер не поддерживает рисование.</p>
      		</canvas>
      	</div>
    </body>
    </html>