Canvas height and width

Question

When programming in HTML canvas, the js dimensions of the canvas don't always match the css dimensions. Why is this happening and how can I fix this?

Possible duplicate of [Resize HTML5 canvas to fit window](https://stackoverflow.com/questions/1664785/resize-html5-canvas-to-fit-window) — Kukic Vladimir, Jul 09 '17 at 15:15
Canvas should not be sized with CSS. It should be sized with HTML attributes of JS dynamically setting of those attributes. — Scott Marcus, Jul 09 '17 at 15:23

score 2 · Answer 1 · answered Jul 09 '17 at 15:14

I've found the problem. I was setting the dimensions of the using CSS, when you actually have to set the width and height attributes. This was causing it to be stretched/skewed.

var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');

http://jsfiddle.net/h2yJn/66/

score 1 · Answer 2 · answered Jul 09 '17 at 15:14

1

You can try to set the width and height of the canvas to be equal to the dimensions of the window object:

function createCanvas() {
    var ctx = //the canvas context;
    ctx.canvas.width  = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
   //your code
}

In addition, it is a good idea to set the body and html tags to the full width of the window:

body, html{
     height: 100%;
     width:  100%;
}

answered Jul 09 '17 at 15:14

Kaloyan

106
1
3
8

Yes, you can. but that doesn't answer the question. – Scott Marcus Jul 09 '17 at 15:24

score 1 · Answer 3 · answered Jul 09 '17 at 15:39

You can also do this by using pure javascript and set the dimensions of the canvas in javascript depending on your CSS values:

//Get Canvas
var canvas = document.getElementById("canv");

// Get computed style of the canvas element.
var cstyle = window.getComputedStyle(canvas);

// Returns the width as str in px: e.g. 600px.
// Parse resolves that issue.
canv.width = parseInt(cstyle.width);
canv.height = parseInt(cstyle.height);

Demo: https://jsfiddle.net/ofaghxfq/2/

Canvas height and width

3 Answers3