キャンバスに画像を追加する方法

HTMLの新しいcanvas要素を少し実験しています。

キャンバスに画像を追加したいのですが、なんらかの理由で機能しません。

私は次のコードを持っています：

HTML

<canvas id="viewport"></canvas>

CSS

canvas#viewport { border: 1px solid white; width: 900px; }

JS

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  context.drawImage(base_image, 100, 100);
}

画像が存在し、JavaScriptエラーは発生しません。画像が表示されないだけです。

それは私が見逃した本当にシンプルなものでなければなりません...

多分あなたはそれを描く前に画像がロードされるまで待たなければならないでしょう。代わりにこれを試してください：

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function(){
    context.drawImage(base_image, 0, 0);
  }
}

つまり、画像のonloadコールバックで画像を描画します。

これがキャンバスに画像を描画するためのサンプルコードです-

$("#selectedImage").change(function(e) {

var URL = window.URL;
var url = URL.createObjectURL(e.target.files[0]);
img.src = url;

img.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");        

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, 500, 500);
}});

上記のコードでは、selectedImageは入力コントロールであり、システム上の画像を参照するために使用できます。アスペクト比を維持しながらキャンバスに画像を描画するサンプルコードの詳細については、以下をご覧ください。

http://newapputil.blogspot.in/2016/09/show-image-on-canvas-html5.html

私の場合、次の関数パラメーターを間違えました。

context.drawImage(image, left, top);
context.drawImage(image, left, top, width, height);

あなたがそれらを期待している場合

context.drawImage(image, width, height);

画像をキャンバスのすぐ外側に配置し、質問で説明したのと同じ効果を使用します。

.onloadを使用する必要があります

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d"); 

const drawImage = (url) => {
    const image = new Image();
    image.src = url;
    image.onload = () => {
       ctx.drawImage(image, 0, 0)
    }
}

ここに理由があります

キャンバスが既に作成された後で最初にイメージをロードする場合、キャンバスはイメージを描画するためにすべてのイメージデータを渡すことができません。したがって、最初に画像に付属するすべてのデータをロードしてから、drawImage（）を使用する必要があります。