javascript - Why do width/height element attributes render differently from inline/CSS styles? -


recently i've been coding simple platformer in html5 , js. background image, has width of 600 pixels , height of 400 pixels, rendered differently depending on how define size of canvas.

if use element attributes , define size so: <canvas width="600" height="400"> desired outcome; image sits within canvas.

on other hand, if define canvas size giving canvas id , style within css file so: #canvas { width: 600px; height: 400px; }, or style inline, image appears stretched , doesn't fit within canvas, although values identical.

why don't these declaration methods render similarly?

there difference between canvas dimensions , canvas display size.

the html attributes sets canvas dimensions, determines how objects measured draw on canvas.

the css style sets canvas display size, determines how large canvas drawn in browser. if display size different dimensions, canvas stretched when drawn.

if define dimensions, used display size, i.e. canvas drawn @ scale 1:1.

if define display size, dimensions default value 300 times 150.


Comments

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -