Game Development Reference
In-Depth Information
and not the styled size of the canvas. This is a key principle that can't be emphas-
ized enough. By default, a canvas is 300 x 150 pixels. Even if we resize the canvas
through
Cascading Style Sheets
(
CSS
), the rendering context that it generates will
be that size (unless we physically resize the canvas, of course). Once the rendering
context has been created, it cannot be resized.
<style>
canvas {
border: 3px solid #ddd;
width: 500px;
height: 300px;
}
</style>
<script>
var canvas =
document.createElement("canvas");
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
alert(ctx.canvas.width);
</script>
