how to position image accurately

Asked

Viewed 51 times

-2

Hello I would like to know how to correctly position the image in the center of canvass with precision?

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<canvas style="border:0px solid #000;width:950px; height:555px" id="canvas"></canvas>
<img src="cidade.png" id="city">
<body bgcolor="lightblue">
   
  <script> 
  
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
  
    var city = document.getElementById('city');
    city.onload = function(){
    ctx.drawImage(city,475,277,950,555);
    city.style.display = 'none';
     }
     
  
  
  var IA = Math.floor(Math.random() * 3);
    </script>   
    
</body>
</html>
javascript html5 image canvas positioning

1 answer

0

Do it this way in css:

canvas{
    margin-left: auto;
    margin-right: auto;
    display: block;
}

Browser other questions tagged javascript html5 image canvas positioning

You are not signed in. Login or sign up in order to post.