<!DOCTYPE html>
<title>Canvas width and height attributes are used as the surface size, and also to infer aspect ratio</title>
<link rel="author" title="Oriol Brufau" href="[email protected]">
<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images">
<link rel="match" href="/css/reference/ref-filled-green-200px-square.html">
<meta name="assert" content="
Unlike <img>, <canvas> doesn't map its dimension attributes to the dimension properties.
Therefore, the 1st <canvas> should be 100px wide since it infers an aspect ratio of 150 / 150.
The 2nd <canvas> should be 100px tall since it infers an aspect ratio of 150 / 300.
The 3rd <canvas> should be 150px wide since it infers an aspect ratio of 150 / 100.
The 4th <canvas> should be 100px tall since it infers an aspect ratio of 150 / 300.">
<style>
div {
background: red;
width: 200px;
font-size: 0;
}
canvas {
vertical-align: top;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div>
<canvas id="canvas" width="150" style="background: green; height: 100px"></canvas>
<canvas id="canvas" height="300" style="background: green; width: 100px"></canvas>
<canvas id="canvas" width="150" height="100" style="background: green; height: 100px"></canvas>
<canvas id="canvas" width="150" height="300" style="background: green; width: 50px"></canvas>
</div>
Codebase Browser
chromium