Drawning with canvas - problem with sizing [closed]
- by pioncz
For example i made 2 canvas with size 500px x 500px and 100px x 100px to see how fillrect works and i found that canvas.fillrect doesnt takes px for arguments, and my question is: how to make pixels as arguments or how to count these arguments for pixels?
This is example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#00f';
ctx.fillRect (0, 0,100, 100);
var canvas2 = document.getElementById('myCanvas2');
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = '#0f0';
ctx2.fillRect (0, 0, 100, 100);
}
</script>
</head>
<body onLoad="draw();">
<canvas id="myCanvas" style="background:black;width:500px;height:500px;display:block;position:absolute;top:0px;left:0px;">
</canvas>
<canvas id="myCanvas2" style="background:purple;width:100px;height:100px;display:block;position:absolute;top:0px;left:0px;">
</canvas>
</body>
</html>
