【javascript】画像を読み込んでcanvasに描画しよう

使用するクラス

HTMLCanvasElement

関数

• getContext(contextType)

CanvasRenderingContext2D

関数

• drawImage( image, dx, dy, dwidth, dheight)

画像を描画する

context.drawImage()に画像と、画像を描画する位置情報（x､y）、画像のサイズ（width, height）を指定して描画します。画像のサイズを指定しないと、等倍で貼り付けられます。図形等の描画方法は【javascript】canvasに丸や四角や文字などを描いてみようをご覧ください。

window.addEventListener( 'load', function(){
  function drawImage(){
    var img = new Image();
    img.src = 'http://creakazukin.wp.xdomain.jp/wp-content/uploads/2017/06/cat.png';
    let x = 50;
    let y = 30;
    img.onload = function(){
      let width = img.width / 5;
      let height = img.height / 5;
      context.drawImage( img, x, y, width, height );
    };
  }
  let canvas = document.querySelector( '#image-canvas128' );
  let context = canvas.getContext( '2d' );
  drawImage();
});

サンプル

画像を選択して描画するサンプルです。ファイルを選択から好きな画像を描画してみてください。画像（jpeg, png, gif）以外のファイルは描画できません。