CSS canvas width and height setting

Question

I am creating canvas element with javascript like

Can=document.createElement("canvas");

Then I want to set the width of this element in centimeters. I am doing

Can.style.width="8cm";
Can.style.height="5cm";

I am setting other css properties like,

Can.style.cssText = 'position:relative; top:24px; left:28px; border-radius:30px; float:left; cursor:pointer; box-shadow: 0px 0px 2px 2px black; background-color:#cdcdcd';

But it is not being set. What's is the problem? How to do this?

score 2 · Accepted Answer · answered Oct 24 '12 at 21:02

You need to specify the canvas size in pixels. You can then scale the canvas using cm as units.

canvas.width = 500; // px
canvas.height = 300; // px

canvas.style.width = '5cm';
canvas.style.height = '3cm';

The number of pixels in a canvas has to be explicitly/absolutely defined. Centimeters are a relative value.

score -1 · Answer 2 · answered Oct 24 '12 at 12:15

-1

use:

Can.width = "5px";
Can.height = "5px";

cm are not recomendeed

answered Oct 24 '12 at 12:15

Baronth

981
7
13

Well you are wrong. I want to use cm. And i got the issue and resolve it. – MJQ Oct 24 '12 at 12:16
My question was not that!!! So that's why you are wrong. But thanks for giving link of recommendations :) – MJQ Oct 24 '12 at 12:20
1

never use cm on the web, nothing here is cm based. – Toping Oct 24 '12 at 12:22
2

Regardless of whether it's recommended or not the answer had absolutely nothing to do with the actual question itself. At best it should have been a comment and not an answer. – Rick Calder Oct 24 '12 at 12:34

CSS canvas width and height setting

2 Answers2

Linked