0

I'm having issues getting this image to scale down. I'm trying to change the drawing surface but nothing is working so far.. I've tried just about everything. What's causing the image to blow up? My overall goal with this webpage is to create something similar to the background of the twilight zone intro. There will be stars blinking and they'll be at random coordinates. Any advice or assistance is appreciated.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Adam The Developer</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <style>
    html, body {
    margin: 0;
    }
    .container-fluid {
       height: 100vh;
       /*background-image: url("http://deepskycolors.com/pics/astro/2008/07/07-27-2008_Eagle.jpg");*/
    background-image: url("https://s-media-cache-ak0.pinimg.com/originals/a1/ae/37/a1ae37a1732758f497126a03e32b99bd.jpg");
    background-repeat: no-repeat;
       background-position: center center;
          background-size: cover;
    }
    .container-fluid ul {
   display: inline-block;
   position: relative;
   right: -75%;
   top: 45px;
    }
    .container-fluid li {
   display: inline-block;
   color: white;
   font-size: 1.5em;
   padding-right: 5px;
   padding-left: 5px;
    }
    .container-fluid h1,h2 {
   text-align: center;
   color: #fff;
   position: relative;
   top: 30%;
    }
    .container-fluid h1 {
   font-weight: 900;
   font-size: 70px;
    }
    .container-fluid h2 {
   font-weight: bold;
   font-size: 40px;
    }
    #myCanvas {
    position: absolute;
    width: 100%;
    height: 100vh;
    }
   
 </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="300" style="border:1px solid #000;">
 <img id="git" src="1474972014_github.svg" width="30px" height="30px">
 </canvas>
 <div class="container-fluid">
     <ul>
   <li>ABOUT</li>
   <li>PORTFOLIO</li>
   <li>CONTACT</li>
  </ul>
  <h1>ADAM THE DEVELOPER</h1>
  <h2>Welcome To My Site!<br>Where Nothing Is Impossible.</h2>
  <!--<img id="git" src="1474972014_github.svg" width="30px" height="30px">-->
 </div>
 <div class="container">
  <h1>ABOUT</h1>
  <p>Hello everyone. My name is Adam Bell and I'm a front-end web developer. Growing up, I've always been fascinated with technology and creating things. Anytime </p>
 </div>
 <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
window.onload = function() {
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");
 var img = document.getElementById("git");
 ctx.drawImage(img, 300, 30);
};
</script>
</body>
</html>
thetekkenmaster
  • 9
  • 3
  • Seems like setting canvas dimensions by css will stretch the canvas contents. Instead of setting it by css you would need to set absolute width and height attributes of the canvas before you start drawing on it. See this thread http://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties – Mr_KoKa Apr 16 '17 at 12:42
  • http://stackoverflow.com/documentation/html5-canvas/1892/getting-started-with-html5-canvas/7515/canvas-size-and-resolution#t=201704161722490910365 – Blindman67 Apr 16 '17 at 17:23

0 Answers0