HTML Canvas Drawing - W3Schools

Trang chủ » Html Canvas Graphics » HTML Canvas Drawing - W3Schools

Có thể bạn quan tâm

HTML Draw on the Canvas ❮ Previous Next ❯

Draw on the Canvas With JavaScript

The drawing on the canvas is done with JavaScript.

The canvas is initially blank. To display something, a script is needed to access the rendering context and draw on it.

The following example draws a red rectangle on the canvas, from position (0,0) with a width of 150 and a height of 75:

Example

<canvas id="myCanvas" width="200" height="100" style="border:1px solid black;"></canvas><script> const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(0, 0, 150, 75);</script> Try it Yourself »

Step 1: Find the Canvas Element

First of all, you must find the <canvas> element.

You access a <canvas> element with the HTML DOM method getElementById():

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

Step 2: Create a Drawing Object

Secondly, you need a drawing object for the canvas.

The getContext() method returns an object with tools (properties and methods) for drawing:

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

Step 3: Draw on the Canvas

Finally, you can draw on the canvas.

Set the fill-color to red with the fillStyle property:

ctx.fillStyle = "red";

The fillStyle property can be a color, a gradient, or a pattern. The default fillStyle is black.

The fillRect(x, y, width, height) method draws the rectangle, filled with the fill style color, on the canvas:

ctx.fillRect(0, 0, 150, 75);

See Also:

W3Schools' Full Canvas Reference

❮ Previous Next ❯ ★ +1 W3schools Pathfinder Track your progress - it's free! Log in Sign Up

Từ khóa » Html Canvas Graphics