Html Canvas get blurry when I make it responsive using css

Question

I tried to make responsive canvas in width (I don't want the height to be responsive, just the width) by width: 100%; using css but canvas height got bigger that what I defined in html so as the canvas shapes and that made my canvas shapes got blurry, I searched the web for this and find no answer

Here is my code

**html**
<div class="container"><canvas id="myCanvas" height="420"></canvas></div>

**css**
.container { max-width: 960px; margin: 0 auto; }
#myCanvas {
  margin: 30px 0;
  background: white;
  box-shadow: 4px 6px 30px #ddd;
  width: 100%;
  height: auto;
}

**javascript**
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.arc(100, 100, 80, 0, Math.PI * 2);
ctx.fill();

And here is the output from Firefox 62 that illustrate the problem you will notice that the canvas height is bigger that 420 and my circle is bigger that what I defined in the js FirefoxScreenShot

Better here is the output of the same code above in jsbin https://output.jsbin.com/coduke

after that Is there any way make html canvas responsive using css without having these issues

score 2 · Accepted Answer · answered Oct 06 '18 at 22:08

Unfortunately I couldn’t accomplish this using css, but by adding two js lines I could do it

First wrap your canvas element with a div let’s call it canvas-wrapper

<div id="canvas-wrapper">
    <canvas id="myCanvas" height="420"></canvas>
</div>

Then make your canvas-wrapper responsive the way you want it to be. For the sake of my project I’m going to make it responsive like so #canvas-wrapper { width: 100%; } Then in the JavaScript file add these two lines

var canvasWrapperRect = document.getElementById('canvas-wrapper').getBoundingClientRect();
canvas.width = canvasWrapperRect.width;

And we’re good to go just remember that you should update your browser every time you resize the window so that the effect take place

And here is the full code in jsbin

Aside#1

You could also make the height of your canvas responsive by First make your canvas-wrapper container responsive

#canvas-wrapper {
    Width: 100%;
    Height: 80vh; /* or any other method */
}

Then we add one js line ( remember that’s make them three lines of js code )

canvas.height  = canvasWrapperRect.height;

And here is the full code in jsbin

Aside#2

It’s possible to make a function so that the canvas width change on the fly every time you resize the window ( instead of updating the browser ) but remember to do so You have to retype every single code of your javaScript you wrote for your canvas element in the function, and then create event listener to track the change of your window size

function changeTheCanvasWidthOnTheFly() {
canvasWrapperRect = document.getElementById('canvas-wrapper').getBoundingClientRect();
canvas.width = canvasWrapperRect.width;
canvas.height = canvasWrapperRect.height;
// then retype or invoke every code you typed for your canvas element
ctx.fillStyle = ‘red’;
drawCircle();
}
window.onresize = changeTheCanvasWidthOnTheFly;

Here is the full code on jsbin

( I shared this for the sake of the community )

Ben · Answer 2 · 2018-10-06T20:34:15.000

From an HTML and CSS perspective, put all of your styles in your CSS file instead of using inline styles. You didn't define your height property in your inline style as a style attribute, so your HTML was ignoring it.

Please see my height property and value in the CSS below. This will prevent the height of your #canvasfrom going past 420px. With your inline style defined properly, your height property value of auto would have been irrelevant in your CSS.

I just halved the x, y, and radius parameters in your javascript to make it smaller. That's more of a personal preference to tweak how you like.

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.arc(50, 50, 40, 0, Math.PI * 2);
ctx.fill();

.container { 
    max-width: 960px; 
    margin: 0 auto; 
}

#myCanvas {
  margin: 30px 0;
  background: white;
  box-shadow: 4px 6px 30px #ddd;
  width: 100%;
  height: 420px;
}

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <meta charset="UTF-8">
        <link rel="stylesheet" href="css/so_help.css" type="text/css">
  <title></title>
 </head>
 <body>
        
        <div class="container">
            <canvas id="myCanvas"></canvas>
        </div>
        
        <script src="js/so_help.js"></script>
        
 </body>
</html>

Thank you for your answer, that solved the canvas height issue but this make my canvas shapes even worse. from html and css prospective that's wonderful, but when add JavaScript to consideration, its now worse — Ahmed Hamed, Oct 06 '18 at 20:38
You are welcome. I am working on a solution for your JavaScript blur. — Ben, Oct 06 '18 at 20:53

Html Canvas get blurry when I make it responsive using css

2 Answers2