Question

113

Setting canvas width 100% and max-width

rated 0 times [ 119] [ 6] / answers: 1 / hits: 26355 / 10 Years ago, fri, september 5, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cadendericki

Add To Favorites

Follow

Total Points: 482

Total Questions: 109

Total Answers: 103

Location: Ecuador

Member since Thu, Jun 4, 2020

4 Years ago

cadendericki questions

1 ERROR TypeError: Cannot read properties of undefined (reading 'phones')

Tue, Mar 22, 22, 00:00, 2 Years ago

1 firefox browser does not start in playwright

Wed, Apr 7, 21, 00:00, 3 Years ago

1 React Creating Dynamic Select and Option Elements with Material-UI

Wed, Jan 27, 21, 00:00, 3 Years ago

1 How to use the vue router in another file?

Wed, Jul 8, 20, 00:00, 4 Years ago

1 Format column header dates in FullCalendar

Thu, May 14, 20, 00:00, 4 Years ago

View All

answered 10 Years ago jamila · Accepted Answer

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%.