Setting canvas width 100% and max-width

Question

I want to set width 100% and limit it with max-width to my canvas element. Regardless of canvas width I want to have static canvas height. But when I set it with css, it seems that browser draws canvas with standard siza and rezises canvas to 100% width and proporionaly it resises height. But the worst is that it scales the picture inside the canvas. I also tried to set css width property of canvas from JS but it led to the same result.

<canvas id="myCanvas" width="100%" height="630px"></canvas>

makes canvas with 100px width and 630px height

<canvas id="myCanvas"></canvas>

and css

#myCanvas {
    width:100%;
    height:630px;
}

makes canvas 100% width but proportionaly resizes height and scales an image inside canvas. Setting css with JS does the same.

How am I supposed to do this?

Answer 1

The drawing API dimensions for the canvas element does not need to match the CSS dimensions that it occupies on the screen. This allows one to do sub pixel graphics if they so desired, (to create smooth motion with anti aliasing). So the canvas width of 100% means nothing it wants the number of pixels it should be using, I believe you get the default width of 400 as if no width was used at all. However it can be changed with javascript to any width you would like.

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = $(window).width(); 
canvas.height = 630;

Or to do anti-aliasing.

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = $(window).width()*2; 
canvas.height = 630*2;

Set the canvas width to a number higher that the space it has on the screen. Each canvas pixel only takes up 1/2 an actual pixel and movement looks more video like.

Update added jsfiddle

http://jsfiddle.net/juaovd7o/

<canvas id="myCanvas" width="284px" height="120px">hello</canvas>
<canvas id="myCanvas2" style="width:284px;height:120px;"></canvas>
<img src="http://whitedove-coding.com/static/whitedove-829.png" id="dove">

 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.rect(0, 0, 284, 120);
      context.lineWidth = 4;
      context.strokeStyle = 'black';
      context.stroke();
 var canvas2 = document.getElementById('myCanvas2');
      canvas2.width=568;
      canvas2.height=240;
      var context2 = canvas2.getContext('2d');
      context2.beginPath();
      context2.rect(0, 0, 568, 240);
      context2.lineWidth = 4;
      context2.strokeStyle = 'black';
      context2.stroke();
var img=document.getElementById("dove");
      context2.drawImage(img,0,0);
      context.drawImage(img,0,0);

The width attrib will set both the css and the API width if they are not set by other means, but 100% width is not valid for the API so the API falls back to its default width of 400px.

Per your question, you need to use both the CSS width of 100% and set the canvas API with or to whatever number of pixels that will be? jquery $(window).width() gives us the pixel count of 100%.