canvasDOM 元素具有.height与 和.width属性相对应的和height="鈥�"属性width="鈥�"。在
JavaScript 代码中将它们设置为数值以调整画布大小。例如：

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 800;
canvas.height = 600;

请注意，这会清除画布，但您应该遵循ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);处理那些未完全清除画布的浏览器。您需要在大小更改后重绘您想要显示的任何内容。

进一步注意，高度和宽度是用于绘图的逻辑画布尺寸，与CSS属性 不同。 如果不设置 CSS 属性，画布的固有尺寸将用作其显示尺寸；如果您确实设置了 CSS
属性，并且它们与画布尺寸不同，则您的内容将在浏览器中缩放。例如：style.height``style.width

// Make a canvas that has a blurry pixelated zoom-in
// with each canvas pixel drawn showing as roughly 2x2 on screen
canvas.width  = 400;
canvas.height = 300; 
canvas.style.width  = '800px';
canvas.style.height = '600px';

请参阅放大 4 倍的画布的 实时示例。

var c = document.getElementsByTagName('canvas')[0];

var ctx = c.getContext('2d');

ctx.lineWidth   = 1;

ctx.strokeStyle = '#f00';

ctx.fillStyle   = '#eff';



ctx.fillRect(  10.5, 10.5, 20, 20 );

ctx.strokeRect( 10.5, 10.5, 20, 20 );

ctx.fillRect(   40, 10.5, 20, 20 );

ctx.strokeRect( 40, 10.5, 20, 20 );

ctx.fillRect(   70, 10, 20, 20 );

ctx.strokeRect( 70, 10, 20, 20 );



ctx.strokeStyle = '#fff';

ctx.strokeRect( 10.5, 10.5, 20, 20 );

ctx.strokeRect( 40, 10.5, 20, 20 );

ctx.strokeRect( 70, 10, 20, 20 );


body { background:#eee; margin:1em; text-align:center }

canvas { background:#fff; border:1px solid #ccc; width:400px; height:160px }


<canvas width="100" height="40"></canvas>

<p>Showing that re-drawing the same antialiased lines does not obliterate old antialiased lines.</p>