Home > front end >  How to make HTML canvas for emscripten without borders
How to make HTML canvas for emscripten without borders

Time:10-27

I have a simple C SDL2 program and I'm using emscripten to run it in the browser. Emscripten generates two files (javascript and webassembly) and it renders everything into HTML canvas. I found this simple HTML canvas on the internet and it works just fine but for some reason, it has white borders on the left and on the top. How can I remove these borders? Here is the HTML code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
        <script type='text/javascript'>
            var Module = {
                canvas: (function() { return document.getElementById('canvas'); })()
            };
        </script>
        <script src="index.js"></script>
    </body>
</html>

screenshot here

CodePudding user response:

This is the browser-default margin on the body-element. You can remove it by adding some CSS to the head-element.

Example:

<style>
    body {
        margin: 0;
    }
</style>
  • Related