Canvas API

Ang elemento <canvas> ay nagtatalaga ng lugar ng bitmap sa pahina ng HTML.

Ang Canvas API ay nagbibigay ng kapangyarihan sa JavaScript na magpahayag ng mga图形 sa layunin.

Ang Canvas API ay nagbibigay ng kakayahan sa JavaScript na magpahayag ng mga hugis, linya, kurva, kahon, teksto at imahe, pati na rin ang kulay, pag-rotasyon, transparensya at iba pang operasyon sa pixel.

Idagdag ang Canvas sa HTML

Maaari kang magdagdag ng elemento canvas sa anumang lugar ng pahina sa HTML gamit ang tag <canvas>:

Instance

<canvas id="myCanvas" width="300" height="150"></canvas>

Try it yourself

Paano abutin ang elemento Canvas

Maaari kang gumamit ng HTML DOM method na getElementById() upang abutin ang elemento <canvas>:

const myCanvas = document.getElementById("myCanvas");

To draw on the canvas, you need to create a 2D context object:

const ctx = myCanvas.getContext("2d");

Notes

The HTML <canvas> element itself does not have drawing capabilities.

You must use JavaScript to draw any graphics.

The getContext() method returns an object with drawing tools (methods).

Drawing on the canvas

After creating the 2D context object, you can draw on the canvas.

The following fillRect() method draws a black rectangle located at position 20,20. The rectangle is 150 pixels wide and 100 pixels high:

Instance

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Try it yourself

Using color

The fillStyle property sets the fill color of the drawing object:

Instance

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Try it yourself

You can also use the document.createElement() method to create a new <canvas> element and add it to an existing HTML page:

Instance

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Try it yourself

Path

Common methods for drawing on the canvas are:

1. Start a path - beginPath()
2. Move to a point - moveTo()
3. Draw in the path - lineTo()
4. Draw a path - stroke()

Instance

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Try it yourself