a little bit scrolling in html document

Question

When i run my code in browser it shows a little bit scrolling but without scroll bar. I am trying to make up a game in html canvas but when i used dpi scaling and made it smooth it shows a little bit scrolling.
This is the code of document =>

<!DOCTYPE html>
<html>
<style>
    body {
        margin: 0px;
    }
    
    canvas {
        height: 100%;
        width: 100%;
        position: relative;
    }
</style>

<body>
    <canvas id="canvas"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var c = canvas.getContext('2d');
        let dpi = window.devicePixelRatio;
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        function fix_dpi() {
            let style_height = canvas.height;
            let style_width = canvas.width;
            canvas.setAttribute('height', style_height * dpi + "px");
            canvas.setAttribute('width', style_width * dpi + "px");
        }
        fix_dpi();

        function Player(x, y, size, angle) {
            this.x = x;
            this.y = y;
            this.size = size;
            this.angle = angle;
            this.draw = function() {
                c.beginPath();
                c.fillStyle = "#b3ffff";
                c.moveTo(this.x + (Math.sin(this.angle * Math.PI / 180) * this.size), this.y + (Math.cos(this.angle * Math.PI / 180) * this.size));
                c.lineTo(this.x + (Math.sin((this.angle + 120) * Math.PI / 180) * this.size), this.y + (Math.cos((this.angle + 120) * Math.PI / 180) * this.size));
                c.lineTo(this.x + (Math.sin((this.angle + 240) * Math.PI / 180) * this.size), this.y + (Math.cos((this.angle + 240) * Math.PI / 180) * this.size));
                c.lineTo(this.x + (Math.sin((this.angle + 360) * Math.PI / 180) * this.size), this.y + (Math.cos((this.angle + 360) * Math.PI / 180) * this.size));
                c.fill();
                c.closePath();
                c.beginPath();
                c.fillStyle = " #e6ffe6";
                c.arc(this.x + (Math.sin(this.angle * Math.PI / 180) * this.size), this.y + (Math.cos(this.angle * Math.PI / 180) * this.size), this.size / 3, 0, Math.PI * 2, false);
                c.fill();
            }
        }
        addEventListener("keydown", event => {
            if (event.keyCode == 32) {
                sta = "trigger";
            } else if (event.keyCode == 38) {
                stu = "on";
            }
        })
        addEventListener("keyup", event => {
            if (event.keyCode == 32) {
                sta = "off";
            } else if (event.keyCode == 38) {
                stu = "off";
            }
        })
        var sta = "off";
        var stu = "off";
        var angle = 180;
        var x = 100;
        var rspeed = 5;
        var size = 5;
        var y = 100;
        var sizex = 50;

        function animate() {
            requestAnimationFrame(animate);
            c.globalAlpha = 0.3;
            c.fillStyle = "#00004d";
            c.fillRect(0, 0, canvas.width, canvas.height);
            if (sta == "trigger") {
                angle = angle + rspeed;
            }
            if (stu == "on") {
                x = x + Math.sin(Math.PI / 180 * angle) * size;
                y = y + Math.cos(Math.PI / 180 * angle) * size;
            }
            var player = new Player(x, y, sizex, angle);
            c.globalAlpha = 1;
            player.draw();
        }
        animate();
    </script>
</body>

</html>

when i run my code in browser it shows a little bit scrolling but without scroll bar.

Welcome to SO! Please don't use CSS width/height on canvas--it warps the canvas. Use `canvas.width` and `canvas.height` attributes only. — ggorlen, Feb 16 '21 at 15:13
Does this answer your question? [HTML Canvas Full Screen](https://stackoverflow.com/questions/4037212/html-canvas-full-screen) — ggorlen, Feb 16 '21 at 15:16

Star Shine · Answer 1 · 2021-08-30T17:35:56.870

Now I knew the answer to it. The problem is in js where I am declaring the width and height of canvas instead of doing such things to the canvas I must do that:

<html>
<head>
<style>
body{
margin : 0px;
}
canvas{
width : 100%;
height : 100%;
}
</style>
</head>
<body>
<canvas id="canvas">
<script>

var canvas = document.getElementById("canvas");
var dpr = window.devicePixelRatio;
var c = canvas.getContext("2d")

//fixing dpi

canvas.width = canvas.offsetWidth * dpr;
canvas.height = canvas.offsetHeight * dpr;
c.scale(dpr,dpr)

//dpi fixed

function Player(x, y, size, angle) {
            this.x = x;
            this.y = y;
            this.size = size;
            this.angle = angle;
            this.draw = function() {
                c.beginPath();
                c.fillStyle = "#b3ffff";
                c.moveTo(this.x + (Math.sin(this.angle * Math.PI / 180) * this.size), this.y + (Math.cos(this.angle * Math.PI / 180) * this.size));
                c.lineTo(this.x + (Math.sin((this.angle + 120) * Math.PI / 180) * this.size), this.y + (Math.cos((this.angle + 120) * Math.PI / 180) * this.size));
                c.lineTo(this.x + (Math.sin((this.angle + 240) * Math.PI / 180) * this.size), this.y + (Math.cos((this.angle + 240) * Math.PI / 180) * this.size));
                c.lineTo(this.x + (Math.sin((this.angle + 360) * Math.PI / 180) * this.size), this.y + (Math.cos((this.angle + 360) * Math.PI / 180) * this.size));
                c.fill();
                c.closePath();
                c.beginPath();
                c.fillStyle = " #e6ffe6";
                c.arc(this.x + (Math.sin(this.angle * Math.PI / 180) * this.size), this.y + (Math.cos(this.angle * Math.PI / 180) * this.size), this.size / 3, 0, Math.PI * 2, false);
                c.fill();
            }
        }
        addEventListener("keydown", event => {
            if (event.keyCode == 32) {
                sta = "trigger";
            } else if (event.keyCode == 38) {
                stu = "on";
            }
        })
        addEventListener("keyup", event => {
            if (event.keyCode == 32) {
                sta = "off";
            } else if (event.keyCode == 38) {
                stu = "off";
            }
        })
        var sta = "off";
        var stu = "off";
        var angle = 180;
        var x = 100;
        var rspeed = 5;
        var size = 5;
        var y = 100;
        var sizex = 50;

        function animate() {
            requestAnimationFrame(animate);
            c.globalAlpha = 0.3;
            c.fillStyle = "#00004d";
            c.fillRect(0, 0, canvas.width, canvas.height);
            if (sta == "trigger") {
                angle = angle + rspeed;
            }
            if (stu == "on") {
                x = x + Math.sin(Math.PI / 180 * angle) * size;
                y = y + Math.cos(Math.PI / 180 * angle) * size;
            }
            var player = new Player(x, y, sizex, angle);
            c.globalAlpha = 1;
            player.draw();
        }
        animate();
</script>
</body>
</html>

I hope it is clear

It would be easier to read if you had shown the changes that lead to the solution. — Leonard, Aug 31 '21 at 12:08

Elias Mulderij · Answer 2 · 2021-02-13T02:58:05.957

-2

Have you tried using width: 100vw; and height: 100vh; instead of 100%. Sometimes using 100% does not work how you want it to work. Also you give the canvas a height in css and in javascript.

edited Feb 13 '21 at 02:58

answered Feb 13 '21 at 02:53

Elias Mulderij

29
1
1
6

a little bit scrolling in html document

2 Answers2