Page 44 - HTML5

Chapter 4: Canvas

Parameters

Attribute Description

height Specifies the canvas height

width Specifies the canvas width

Remarks

• This tag is not compatible with versions of Internet Explorer less than 9. Check caniuse.com
for browser compatibility.
• canvas is only a container for graphics, and the actual drawing of graphics is done by
JavaScript.

Examples

Basic Example

The canvas element was introduced in HTML5 for drawing graphics.

<canvas id="myCanvas">
Cannot display graphic. Canvas is not supported by your browser (IE<9)
</canvas>

The above will create a transparent HTML<canvas> element of 300×150 px in size.

You can use the canvas element to draw amazing stuff like shapes, graphs, manipulate images,
create engaging games etc. with JavaScript.
The canvas's 2D drawable layer surface Object is referred to as CanvasRenderingContext2D; or from a
HTMLCanvasElement using the .getContext("2d") method:

var ctx = document.getElementById("myCanvas").getContext("2d");
// now we can refer to the canvas's 2D layer context using `ctx`

ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // x, y, width, height

ctx.fillStyle = "#000";
ctx.fillText("My red canvas with some black text", 24, 32); // text, x, y

jsFiddle example

Drawing two rectangles on a

https://riptutorial.com/ 28