Not getting actual canvas height and width, and fillRec()t is blurred out

Question

I just have started with the <canvas> in HTML, i'm facing some issues.

I'm trying to set the canvas width and height using CSS, but not getting the actual value i.e. Even after changing the height in CSS, it's giving me height as 150 and width as 300 always.
fillRect() is giving me blurred out image, but I want sharp image. For this I looked out for other resources, which said fillRect() and strokeRect() half-inside and half-outside the x, y co-ordinate. Here's the link to that. But I'm not able to understand what exactly the guy is doing to solve the issue.

Here's my code

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Drawing</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        h1 {
            background-color: #2DE0E6;
            color: black;
            text-align: center;
            font-style: oblique;
            width: 100%;
            height: 100px;
            line-height: 100px;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-family: 'Courier New';
            font-size: 40px;
        }
        #canvas-container {
            width: 100%;
            text-align: center;
            margin: auto;
            float: right;
        }
        #myCanvas {
            border: 1px solid #c3c3c3;
            width: 65%;
            height: 450px;
            display: inline;
        }
    </style>
</head>
<body>
    <h1>Canvas Drawing</h1>
    <div id="canvas-container">
        <canvas id="myCanvas"></canvas>
        <br /><br />
        Draw a rectangle
    </div>

    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        context.fillStyle = "#FF0000";
        context.fillRect(5.5, 10.5, 90, 80);
    </script>
</body>
</html>

Also, some resources for an in-depth knowledge of <canvas> will be very much appreciated.

Pato Salazar · Accepted Answer · 2018-08-12T03:42:27.513

Your problem is that the canvas has two sizes: the actual HTML element size and the drawing surface size

When you size the canvas with CSS, you only affect the drawing size. In order to change the element size, you need to set it with the height and width attributes inside the canvas element.

This is why you are getting 150 x 300 pixels all the time. That is the default size of the canvas element. You haven't actually change the size of the canvas element, only the size of its drawing surface.

Just change your canvas element like this

<canvas id="myCanvas" width="600" height="800"></canvas>

If you want more dynamic values you can use javascript to dynamically change the value of the height and width attributes.

var canvas = document.getElementById('myCanvas');
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight / 2;

Changing the size this way resizes the element and the drawing surface. Resizing with CSS only modifies the canvas drawing surface.

The blurred out image might be a product of the wrong resizing of your canvas, but I am not sure.

Here is more info: Canvas Basic Usage

thanks @pato it worked like charm. The only thing that's bothering me is now that whenever I'm changing the tag's height and width(like I did with
), it's changing the tags behavior(as in the entire
area in viewport is affected, but in case of — amit_vickey, Aug 12 '18 at 04:05

Not getting actual canvas height and width, and fillRec()t is blurred out

1 Answers1

), it's changing the tags behavior(as in the entire

area in viewport is affected, but in case of it's changing the drawing surface's size and not the size of the canvas. Why is it happening exactly.?

area in viewport is affected, but in case of