Chartjs-Is it possible to have a canvas next to another canvas without space on the bottom?

by

2👍

✅

Something like the below? If you need more specific placement on page perhaps wrap them in a container that can be more easily moved around.

Edit: Updated to include centering CSS. Might be a bit tight on the snippet preview mind.

<html>
<head>
    <style>
    html, body{
        width:100%;
        height:100%;
        margin:0px;
        border:0px;
        padding:0px;
        box-sizing:border-box;
    }
    #canvas_container{
        position: absolute;
        left:50%; /* put 50% of containing div's width to my left */
        transform: translate(-50%); /* now move me back half of my own width */
    }
    </style>
</head>
<body>
    <div id="canvas_container">
    </div>
    <script type="text/javascript">
        function createCanvas() {
            let canv = document.createElement('canvas')
            canv.height = 150;
            canv.width = 150;
            canv.style.backgroundColor = 'red';
            canv.style.border = '1px solid black'
            canv.style.position = 'relative';
            canv.style.float = 'left';
            document.getElementById('canvas_container').appendChild(canv);
        }
        createCanvas();
        createCanvas();
    </script>
</body>
</html>

Leave a comment