CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4html5-canvas
Jack Franklin
Jack Franklin

Reputation: 105

HTML Canvas resize issue

I am trying to resize my canvas to fit inside it's parent div inside of a Bootstrap grid, however the canvas keeps filling to 2000px x 2000px. It seems from console.log that I am successfully resizing, as they return the same dimensions. The 'Hello World' div is just there for testing.

HTML

        <div class="row justify-content-center">
            <div class="col-10">
                <div class="card">
                    <div class="card-body">
                        <div class="row justify-content-center">
                            <div class="col-8 text-center">
                                <div class="bg-gradient-danger w-100">Hello World</div>
                                <br>
                                <div id="canvasBox"
                                     style="padding: 5px; margin-bottom: 5px;border: 4px solid navy;">
                                    <canvas id="canvas" width="1" height="1"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Javascript

        let canvas = document.getElementById('canvas');
        let parent = document.getElementById('canvasBox');
        let imgUrl = document.getElementById('canvasIMG');
        let ctx = canvas.getContext('2d');

        let wdt = parent.clientWidth - parseInt(parent.style.paddingLeft) - parseInt(parent.style.paddingRight);
        let ht = parent.clientHeight - parseInt(parent.style.paddingTop) - parseInt(parent.style.paddingBottom);

        console.log(wdt, ht)
        canvas.setAttribute('width', wdt + "px");
        canvas.setAttribute('height', ht + "px");
        console.log(canvas.width, canvas.height)
        ctx.drawImage(imgUrl, 0, 0);
        ctx.fillRect(0, 0, canvas.width, canvas.height);

Below is a screenshot of the result, where the canvas keeps overflowing.

Result

Upvotes: 1

Views: 800

Answers (2)

nicholas
nicholas

Reputation: 346

One way to get the canvas to fir the inside of the blue box is to use style="width: 100%" on the canvas:

<canvas id="canvas" style="width: 100%;" height="200px"></canvas>

This does not set a height based on the user's window size, but using the clientHeight may result in unfavorable aspect ratios if the user does not have the same size window you are testing in.

This solution gives the result:

Solution preview

Upvotes: 0

Yalcin Kilic
Yalcin Kilic

Reputation: 800

Maybe your initial width and height values are also wrong. You can refresh on page load and on resize to fit the canvas:

                  let canvas = document.getElementById('canvas');
        let parent = document.getElementById('canvasBox');
        let imgUrl = document.getElementById('canvasIMG');
        let ctx = canvas.getContext('2d');

        function refresh() {
          let wdt = parent.clientWidth - parseInt(parent.style.paddingLeft) - parseInt(parent.style.paddingRight);
        let ht = parent.clientHeight - parseInt(parent.style.paddingTop) - parseInt(parent.style.paddingBottom);

        canvas.setAttribute('width', wdt + "px");
        canvas.setAttribute('height', ht + "px");

          ctx.fillRect(0, 0, canvas.width, canvas.height);
        };

window.addEventListener('load', refresh);
window.addEventListener('resize', refresh);
    <div class="row justify-content-center">
            <div class="col-10">
                <div class="card">
                    <div class="card-body">
                        <div class="row justify-content-center">
                            <div class="col-8 text-center">
                                <div class="bg-gradient-danger w-100">Hello World</div>
                                <br>
                                <div id="canvasBox"
                                     style="padding: 5px; margin-bottom: 5px;border: 4px solid navy;">
                                    <canvas id="canvas" width="1" height="1"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Upvotes: 1

Related Questions