Languages

Menu
Sites
Language
How to set the size of canvas according to div size in tizen

i want  if div size width:100%;height:100% then also canvas size is width:100%;height:100%  (not using pix)

 

 

<div id="parent" style="position:absolute;background-size:100% 100%;background-color:blue;width:100%;height:100%">
        <canvas id="theCanvas" style="background-color: red;">
        </canvas>
    </div>

<script>
$(document).ready(function() {
  var canvas = document.getElementById("theCanvas");
  canvas.width = $("#parent").width();
  canvas.height = $("#parent").height();
  canvas.position = $("#parent").position();
  canvas.background-size = $("#parent").background-size();
});
</script>

List

Responses

5 Replies
Marco Buettner

The method background-size() doesnt exist in jquery

pius lee

Use CSS for layout, Javascript is not good idea for layout.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
body {margin:0; padding:0;}
#parent {
    position:absolute;
	background-size:100% 100%;
	background-color:blue;
	width:100%;
	height:100%;
}
#theCanvas {
	background-color: red;
	width:100%;
	height:100%;
}
</style>
</head>

<body>
<div id="parent">
    <canvas id="theCanvas"></canvas>
</div> 
</body>
</html>

 

Jean Yang

background-size() is CSS property and is does not exist in JQuery. And for the JavaScript syntax is

object.style.backgroundSize = “60px 80px”

colin Rao

One minor issue, in this example, don't need the position css setting. And suggest to be careful to use the absolute position, it's will cause some tricky issue if there are many other tags under body. :)

Palitsyna

Hello,

here you can find all Style Properties: http://www.w3schools.com/jsref/dom_obj_style.asp

and here you can read about Style backgroundSize Property: http://www.w3schools.com/jsref/prop_style_backgroundsize.asp