Phông chữ canvas HTML 5 bị bỏ qua

Question

Tôi đang cố viết một số văn bản vào phần tử canvas, nhưng có vẻ như các tùy chọn phông chữ mà tôi đưa vào đang bị bỏ qua hoàn toàn. Không có vấn đề gì tôi thay đổi chúng, tất cả đều giống nhau, mà tôi tin là sans-serif 10px mặc định. Heres những gì tôi có (chức năng này chạy trên tải)

function start() 
{ 
    canvas = document.getElementById('c'); 
    ctx = canvas.getContext('2d'); 
    ctx.fillStyle = "white"; 
    ctx.font = "12px monospace"; 
    ctx.textBaseline = "top"; 
} 

Nó không hoạt động trong Firefox hoặc Chrome.

Answer 1

Khi nó quay ra, sự thay đổi ctx.font cần phải được sử dụng trong các chức năng tương tự mà là làm fillText()

Điều này làm cho nó hoạt động như một nét duyên dáng.

EDIT

Như richtaur nêu trong bình luận của mình, câu trả lời này là sai. Ngữ cảnh của bạn cần phải được lưu và khôi phục bằng cách sử dụng ctx.save() và ctx.restore() vì nó hiện đang được đặt lại khi bạn gọi canvas.getContext ('2d') một lần nữa.

Answer 2

Điều này cũng có thể xảy ra nếu bạn đặt lại kích thước của canvas. Ít nhất, tôi thấy điều này trong Chrome 23 hôm nay.

context.font = 'bold 20px arial'; 
canvas.width = 100; 
canvas.height = 100; 
console.log(context.font); // gives '10px sans-serif'