Vẽ trên canvas HTML phải được thực hiện bằng JavaScript. Sử dụng Phương thức DOM HTML getElementById () và getContext () trước khi vẽ trên canvas.
Đối với điều đó, hãy làm theo một số bước -
- Bạn cần sử dụng phương thức getElementById () để tìm phần tử canvas.
- Sử dụng getContext (), là đối tượng vẽ cho canvas. Nó cung cấp các phương thức và thuộc tính để vẽ.
- Sau đó vẽ trên canvas.
Ví dụ
Bạn có thể thử chạy đoạn mã sau để vẽ canvas trên JavaScript -
<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas</title>
</head>
<body>
<canvas id="newCanvas" width="400" height="250" style="border:2px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("newCanvas");
var ctxt = canvas.getContext("2d");
ctxt.fillStyle = "#56A7E2";
ctxt.fillRect(0,0,250,120);
</script>
</body>
</html>