Canvas's width to big to draw
38 views
Skip to first unread message
Samuel Wei
Mar 19, 2009, 8:19:30 AM3/19/09
to google-excanvas
<html>
<head>
<title>A canvas example</title>
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('cv').getContext('2d');
ctx.fillStyle = 'Black';
ctx.fillRect(0, 0, 34560, 100);
}
</script>
</head>
<body onload="draw();">
<div width="34560px" height="460px" style="border:1px solid
#CCCCCC;overflow:auto">
<canvas id="cv" width="34560px" height="460px"></canvas>
</div>
</body>
</html>
Anyone know how to resolve this problem?
Thanks in advance!
<head>
<title>A canvas example</title>
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('cv').getContext('2d');
ctx.fillStyle = 'Black';
ctx.fillRect(0, 0, 34560, 100);
}
</script>
</head>
<body onload="draw();">
<div width="34560px" height="460px" style="border:1px solid
#CCCCCC;overflow:auto">
<canvas id="cv" width="34560px" height="460px"></canvas>
</div>
</body>
</html>
Anyone know how to resolve this problem?
Thanks in advance!
Fabien
Mar 19, 2009, 8:32:15 AM3/19/09
to google-excanvas
Hello, what is your problem ?
And why would you need to draw such a rectangle ?
And why would you need to draw such a rectangle ?
Kuba Caban
Mar 19, 2009, 8:33:45 AM3/19/09
to google-...@googlegroups.com
Try:
<canvas id="cv" width="34560" height="460"></canvas>
Those "pxs" here shouldn't take place.
<canvas id="cv" width="34560" height="460"></canvas>
Those "pxs" here shouldn't take place.
2009/3/19 Samuel Wei <sam...@gmail.com>
Samuel Wei
Mar 19, 2009, 8:53:04 AM3/19/09
to google-excanvas
It doesn't work either...
I try to draw Gantt Chart using Canvas.
On Mar 19, 8:33 pm, Kuba Caban <kuba.iluva...@gmail.com> wrote:
> Try:
>
> <canvas id="cv" width="34560" height="460"></canvas>
>
> Those "pxs" here shouldn't take place.
>
> 2009/3/19 Samuel Wei <sams...@gmail.com>
I try to draw Gantt Chart using Canvas.
On Mar 19, 8:33 pm, Kuba Caban <kuba.iluva...@gmail.com> wrote:
> Try:
>
> <canvas id="cv" width="34560" height="460"></canvas>
>
> Those "pxs" here shouldn't take place.
>
Fabien
Mar 19, 2009, 9:09:32 AM3/19/09
to google-excanvas
The max height or width for a canvas seems to be 32768 (which I
thought was enough).
This works :
{{{
ctx.fillRect(0, 0, 32768, 100);
height:460px;">
<canvas id="cv" style="width:32768px; height:460px;"></canvas>
</div>
</body>
}}}
You need to use a correct HTML/CSS syntax in order to make it work.
thought was enough).
This works :
{{{
<html>
<head>
<title>A canvas example</title>
<script type="text/javascript" src="excanvas.js"></script>
<head>
<title>A canvas example</title>
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('cv').getContext('2d');
ctx.fillStyle = 'black';
function draw() {
var ctx = document.getElementById('cv').getContext('2d');
ctx.fillRect(0, 0, 32768, 100);
}
</script>
</head>
<body onload="draw();">
<div style="border:1px solid #CCCCCC;overflow:auto; width:32768px;
</script>
</head>
<body onload="draw();">
height:460px;">
<canvas id="cv" style="width:32768px; height:460px;"></canvas>
</div>
</body>
}}}
You need to use a correct HTML/CSS syntax in order to make it work.
Samuel Wei
Mar 19, 2009, 10:02:23 AM3/19/09
to google-excanvas
Yes, it works . Thank you very much.
Samuel Wei
Mar 19, 2009, 10:29:36 AM3/19/09
to google-excanvas
If I using HTML/CSS to set the height and width for Canvas element,
another problem raised: as the following code, I want to draw a
rectangle with height & width = 20px, but the graphics is much more
bigger than what I want to draw. anyone knows what be happened?
<html>
<head>
<title>A canvas example</title>
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('cv').getContext('2d');
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 20, 20);
460px;overflow:auto">
another problem raised: as the following code, I want to draw a
rectangle with height & width = 20px, but the graphics is much more
bigger than what I want to draw. anyone knows what be happened?
<html>
<head>
<title>A canvas example</title>
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('cv').getContext('2d');
ctx.fillRect(0, 0, 20, 20);
}
</script>
</head>
<body onload="draw();">
<div style="border:1px solid #CCCCCC;width:32768px;height:
</script>
</head>
<body onload="draw();">
460px;overflow:auto">
<canvas id="cv" style="width:32768px;height:460px"></canvas>
</div>
</body>
</html>
</div>
</body>
Kuba Caban
Mar 19, 2009, 10:31:24 AM3/19/09
to google-...@googlegroups.com
As Far As I Know you need to specify canvas element dismensions via HTML in addition to CSSed ones:
<canvas id="cv" width="32768" height="460" style="width:32768px;height:
<canvas id="cv" width="32768" height="460" style="width:32768px;height:
460px"></canvas>
2009/3/19 Samuel Wei <sam...@gmail.com>
Samuel Wei
Mar 20, 2009, 9:41:19 AM3/20/09
to google-excanvas
I already specified width and height for the Canvas element, it does't
work.
On Mar 19, 10:31 pm, Kuba Caban <kuba.iluva...@gmail.com> wrote:
> As Far As I Know you need to specify canvas element dismensions via HTML in
> addition to CSSed ones:
> <canvas id="cv" width="32768" height="460" style="width:32768px;height:
> 460px"></canvas>
>
> 2009/3/19 Samuel Wei <sams...@gmail.com>
work.
On Mar 19, 10:31 pm, Kuba Caban <kuba.iluva...@gmail.com> wrote:
> As Far As I Know you need to specify canvas element dismensions via HTML in
> addition to CSSed ones:
> <canvas id="cv" width="32768" height="460" style="width:32768px;height:
> 460px"></canvas>
>
Fabien
Mar 20, 2009, 9:53:35 AM3/20/09
to google-excanvas
As weird as it is, the HTML properties "width" and "height" don't seem
to support support values more than 32767 (16bits/2 - 1).
This works :
<canvas id="cv" width="32767" height="150"></canvas>
And the rectangle will be really 20*20px. It seems the style attribute
will resize the canvas after the rectangle is drawn, so it is resized
too.
to support support values more than 32767 (16bits/2 - 1).
This works :
<canvas id="cv" width="32767" height="150"></canvas>
And the rectangle will be really 20*20px. It seems the style attribute
will resize the canvas after the rectangle is drawn, so it is resized
too.
Reply all
Reply to author
Forward
0 new messages