Javascript onclick需要3次单击才能完成事件

我知道这个问题已经被问过不止一次了，但我找到的答案似乎不适用于我的情况。。。我对JavaScript非常熟悉，在调试方面更是如此。我试图通过在线教程进行学习，但是当我尝试onclick事件时，起初所有内容都显示为空-该函数应该调整画布的大小，并在第一次单击时将图像放置在左上角。它的作用是在第一次单击时调整画布的大小，然后在第三次单击时添加图像。。。因为我没有调用样式或显示（据我所知），并且函数中没有条件语句，所以我不确定为什么会发生这种情况。我还试图链接函数，而不是像另一篇文章建议的那样内联，但没有用。。。我用的是铬。任何意见都将不胜感激

HTML:

css:

---

在插入图像之前，您必须等待图像加载：

function changeCanvasSize()
{
    var gameCanvas = document.getElementById("gameCanvas");
    var avatarImage = new Image();

    gameCanvas.width = 600;
    gameCanvas.height = 800;

    avatarImage.src = "img/avatar.png";
    avatarImage.onload = function() {
        gameCanvas.getContext("2d").drawImage(avatarImage, 0, 0);
    }
}

---

你能和我们分享一下你的教程吗？我很好奇为什么当你在画布中单击而不是其他元素时会出现画布的重新大小。非常感谢Macmee！这是本教程中甚至没有提到的问题。这就是答案。

function changeCanvasSize()
{
    var gameCanvas = document.getElementById("gameCanvas");
    var avatarImage = new Image();

    gameCanvas.width = 600;
    gameCanvas.height = 800;

    avatarImage.src = "img/avatar.png";
    gameCanvas.getContext("2d").drawImage(avatarImage, 0, 0);
}

body {
    background: #ffffff;  
    text-align: center; 
    padding: 20px; 
    color: #575757; 
    font: 14px/21px Arial,Helvetica,sans-serif;
}

a {
    color: #B93F14;
}

a:hover {
    text-decoration: none;
}

ol {
    width: 600px; 
    text-align: left; 
    margin: 15px auto
}

canvas {
    border: 1px solid black;
}

function changeCanvasSize()
{
    var gameCanvas = document.getElementById("gameCanvas");
    var avatarImage = new Image();

    gameCanvas.width = 600;
    gameCanvas.height = 800;

    avatarImage.src = "img/avatar.png";
    avatarImage.onload = function() {
        gameCanvas.getContext("2d").drawImage(avatarImage, 0, 0);
    }
}