CODEWITHSUNDEEP
javascripthtmlcanvasdimension
Deboroh88
Deboroh88

Reputation: 401

HTML canvas dimensions are right but the context uses the default ones

I have a canvas element inside a div in an HTML page. I've set its width and height via CSS to 100% of the parent div, and it sets them correctly. I defined a "draw" function, and I use it like this: <body onload="draw();"> . And it's implemented like this:

function draw() {
    var cm = 6; // canvas margin

    var canvases = document.getElementsByClassName('container'); 
    for (var i=0; i<canvases.length; i++) {
        var c = canvases[i];
        var w = c.offsetWidth;
        var h = c.offsetHeight;

        console.log('w: ' + w + '; h: ' + h);

        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#561a04';

        ctx.moveTo(cm, cm);
        ctx.lineTo(w-cm, cm);
        ctx.lineTo(w-cm, h-cm);
        ctx.lineTo(cm, h-cm);
        ctx.lineTo(cm, cm);

        ctx.stroke();
   }
}

Now: the console prints the real and correct values of the width and height of the canvas (specifically 381 and 188); but it seems that the context draws as if the canvas was of its default dimensions... in fact if I simply set w = 330; h = 150; it works as expected, but then the canvas stretches the drawing and I not satisfied with the result.

What can I do to make the context use the right dimensions of the canvas? I wanted to redraw the image every time the canvas is resized, but I believe there's no event on the resize of any div, am I right?

Thank you.

Upvotes: 2

Views: 1548

Answers (2)

Tomasz Radwaski
Tomasz Radwaski

Reputation: 202

I've been using canvas for a while, instead of setting it to 100% in the css, set it to 100% with Javascript

EDIT:

I didn't notice you want to set it to 100% of parents div, this should do it

Please try this:

var canvas = document.getElementById("canvas");
canvas.width = canvas.parentElement.offsetWidth; //set canvas width to its parent width
canvas.height = canvas.parentElement.offsetHeight;//set canvas height to its parent height
var ctx = canvas.getContext("2d");

this will set canvas width and height to match it's parrents width & height

Please let me know if that solves your problem!

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074038

Both the canvas itself and the canvas element have a width and height, they're separate things. If they're not the same, the content of the canvas is automatically scaled to fit the element. If you want a 1:1 relation, you need to set the actual width and height of the canvas.

Just after:

var w = c.offsetWidth;
var h = c.offsetHeight;

add

c.width = w;
c.height = h;

Example:

function draw() {
    var cm = 6; // canvas margin
    
    var canvases = document.getElementsByClassName('container'); 
    for (var i=0; i<canvases.length; i++) {
        var c = canvases[i];
        var w = c.offsetWidth;
        var h = c.offsetHeight;
        c.width = w;
        c.height = h;

        console.log('w: ' + w + '; h: ' + h);

        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#561a04';

        ctx.moveTo(cm, cm);
        ctx.lineTo(w-cm, cm);
        ctx.lineTo(w-cm, h-cm);
        ctx.lineTo(cm, h-cm);
        ctx.lineTo(cm, cm);

        ctx.stroke();
   }
}
draw();
.parent {
  width: 200px;
  height: 200px;
  position: relative;
}
.parent canvas {
  width: 100%;
  height: 100%;
}
<div class="parent">
  <canvas class="container"></canvas>
</div>
<div id="status"></div>

Upvotes: 1

Related Questions