<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Smooch&display=swap" rel="stylesheet">
</head>
<body>
<h5>Sử dụng Google Font trong Canvas</h5>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
Promise.all([document.fonts.load('40px "Smooch"')]).then(() => {
// Lấy phần tử canvas
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Vẽ dòng chữ "Hello" với font Smooch
ctx.font = "40px 'Smooch'";
ctx.fillStyle = "orange";
ctx.textAlign = "center";
ctx.fillText("Hello", canvas.width / 2, canvas.height / 3);
});