I have created a functional canvas element at widths up to 22,000 pixels, with a 2d object drawn at 20,000 pixels (horizontal position).

But as I try to increase the width of the canvas element beyond that width, the 2d object no longer appears.

Code sample:

<canvas id="mycanvas" style="position: absolute;" width="4000600" height="600">your browser does not support the canvas tag</canvas>


<script type="text/javascript">
	var canvas=document.getElementById('mycanvas');
	var ctx=canvas.getContext('2d');
	ctx.fillStyle='#FF0000';
	ctx.fillRect(4000000,100,300,300);

</script>

Expected to see the 300X300px red square just to the left of the page's right edge (600 pixels to the left), but nothing appears. 

I'm new to this element, so I may be missing something, but this code works fine if the width of the CANVAS element is reduced, and the fillRect horizontal position is also reduced, both under 30,000 pixels.