CODEWITHSUNDEEP
javascripthtml5-canvas
DreamingInsanity
DreamingInsanity

Reputation: 167

How to get my image drawn on a canvas proportionally, yet not leave any borders when the window is resized

I am currently in the process of making my website. I would like it to be interactive and have a nice design. What I am currently doing is just drawing an image onto my canvas, with a bit of JavaScript that will resize my image proportionally as the window is resized. However, when I resize it to the smallest browser size, or the largest browser size, since it is proportional, it leaves a white border at the side.

I have already tried using CSS to fill the webpage by using 'width: 100%' and 'height: 100%' or 'width / height: auto' but that doesn't seem to change anything. I have also tried other resize functions (to below). but they are all very similar, if not the same.

img.onload = function () {
    ctx.canvas.width = img.width;
    ctx.canvas.height = img.height;

    ctx.drawImage(img, 0, 0);

  resize();
};

function resize() 
{
    var ratio = canvas.width / canvas.height;
    var canvas_height = window.innerHeight;
    var canvas_width = canvas_height * ratio;
    if(canvas_width>window.innerWidth)
    {
        canvas_width=window.innerWidth;
        canvas_height=canvas_width/ratio;
    }

    canvas.style.width = canvas_width + 'px';
    canvas.style.height = canvas_height + 'px';
}

Taken from: https://codepen.io/anon/pen/VNjwYE

What should happen is that the image takes up the whole canvas with no borders at the sides. However, as I said, there are white borders at the side of image. This imgur album has two screenshots of the problem. https://i.sstatic.net/vvW6l.jpg

The rest of the code (i.e. CSS and HTML) can be found on my Codepen: https://codepen.io/DreamingInsanity/pen/aPoJEK

Thanks, Dream.

Upvotes: 0

Views: 67

Answers (2)

DreamingInsanity
DreamingInsanity

Reputation: 167

I changed what code editor I was using and at the same time, neetened up my file structure. As you can see in the HTML I am looking for the CSS under /Home/ whereas now, I am looking for it under /CSS/.

Upvotes: 0

labu4bd
labu4bd

Reputation: 701

just add body{ margin:0px; } in your css,

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();

img.src = "https://source.unsplash.com/2000x1000/?trees,nature,forest";

img.onload = function () {
    ctx.canvas.width = img.width;
    ctx.canvas.height = img.height;

    ctx.drawImage(img, 0, 0);
  
  resize();
};

function resize() {
    var ratio = canvas.width / canvas.height;
    var canvas_height = window.innerHeight;
    var canvas_width = canvas_height * ratio;

    if(canvas_width>window.innerWidth)
    {
        canvas_width=window.innerWidth;
        canvas_height=canvas_width/ratio;
    }

    canvas.style.width = canvas_width + 'px';
    canvas.style.height = canvas_height + 'px';
}

window.onresize = resize;
html, body {
    background-color: #1A1919;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0px;// do it 
}

#canvas {
    width: auto;
    height: auto;
    filter: grayscale(0%);
}


#top_bar {
    background-color: transparent;
    position: absolute;
    width: 100%;
    height: 80px;
    top: 0px;
}
<html>
<head runat="server">
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="Home/Stylesheet.css">
         <link rel="stylesheet" type="text/css" href="Home/Buttons.css" />
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="Scripts/Canvas.js"></script>
    <div id="top_bar"></div>
    </body>
</html>

Upvotes: 2

Related Questions