javascript - 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?

Answer 1

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.