When I add multiple canvases, others ignore the location they are given, wtf?

I

IninsaY2019-10-23 18:35:59

Canvas

IninsaY, 2019-10-23 18:35:59

<!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>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

D

Daniil Bratukhin, 2019-10-23
@IninsaY

You are overwriting onload several times, so only the last handler is executed. Use addEventListener.