Attribute | Description |
height | Specifies the canvas height |
width | Specifies the canvas width |
Basic Example
The canvas element was introduced in HTML5 for drawing graphics.
The above will create a transparent HTML 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
Drawing two rectangles on a
Draw two rectangles on the canvas