Home / Questions / 555033
Accepted
JoseMgz_Ux
Asked: 2022-09-03 07:14:06 +0800 CST 2022-09-03 07:14:06 +0800 CST

<canvas>... centered inside a <div>

  • 772

Maybe it's silly for many or I don't know but I'm still not very good at CSS in responsive design themes and all that.

Well I have a canvas that, so to speak, renders me a PDF, for that part everything is fine but the canvas element is inside a div and no matter how much I want to center it I can't do it, it always stays attached to the right corner of the div.

HTML

<script type="text/javascript" src="../js/pdf.js"></script>
<script type="text/javascript" src="../js/pdf.js"></script>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/turn.min.js"></script>

<body>
            <div id="magazine">          
                    <canvas  id="the-canvas"></canvas>             
            </div>
   <script src="../js/main.js"></script>
</body>

CSS

I have tried to move it with (top, right...) or using margin but when I try to move it towards the center of the div nothing happens.

 #magazine{
        width: 1052px;
        height: 652px;  
        background-color: brown;
        margin: 5em;
        border-radius: 0.5em;
    }

#the-canvas{
    background-color: aliceblue;
    width:110%;
    height:100%;
    border: 1px solid black;
}

js if needed

       $(window).ready(function () {
        $('#magazine').turn({
            display: 'double',
            acceleration: true,
            gradients: !$.isTouch,
            elevation: 70,
            when: {
                turned: function (e, page) {
                    /*console.log('Current view: ', $(this).turn('view'));*/
                }
            }
        });
    });

    $(window).bind('keydown', function (e) {

        if (e.keyCode == 37)
            $('#magazine').turn('previous');
        else if (e.keyCode == 39)
            $('#magazine').turn('next');
    });


    PDFJS.disableWorker = true;

    var pdfDoc, pageNum, scale, canvas, ctx;

    function Init() {
        pdfDoc = null;
        pageNum = 1;
        scale = 1.5;
        canvas = document.getElementById('the-canvas');
        ctx = canvas.getContext('2d');  
    }
    //
    // Get page info from document, resize canvas accordingly, and render page
    //
    function renderPage(num) {
        pdfDoc.getPage(num).then(function (page) {
            var viewport = page.getViewport(scale);
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };
            page.render(renderContext);
        });
        document.getElementById('page_num').textContent = pageNum;
        document.getElementById('page_count').textContent = pdfDoc.numPages;
    }

    $(document).ready(function () {
        Init();
        PDFJS.getDocument('LIBROO2.pdf').then(function (doc) {
            pdfDoc = doc;
            renderPage(pageNum);
        });
    });

    // Go to previous page
    function goPrevious() {
        if (pageNum <= 1)
            return;
        pageNum--;
        renderPage(pageNum);
    }

    // Go to next page
    function goNext() {
        if (pageNum >= pdfDoc.numPages)
            return;
        pageNum++;
        renderPage(pageNum);
    }

EXAMPLE IMAGE enter image description here

javascript

1 Answers

  1. Best Answer

    I leave you an example with display flex , it is very easy to use and understand, besides the containers are adjusted depending on the content of the element.

    #magazine{
        display:flex;
        align-items:center;
        justify-content:center;
        width: 1052px;
        height: 652px;  
        background-color: brown;
        margin: 5em;
        border-radius: 0.5em;
    }

#the-canvas{
    background-color: aliceblue;
    width:100%;
    height:100%;
    border: 1px solid black;
}
    <body>
  <div id="magazine">
    <canvas id="the-canvas"></canvas>
  </div>
</body>

    As a recommendation regarding assignment measures such as height or width, etc, use one measure for all the elements of your site, such as: %, px, em, avoid combining them.

    NOTE. Do the test in your browser, in the viewer here it does not look good.

    • 1