canvas 要素サンプル - 画像

一番左が画像を等倍表示、その隣が縮小表示、右下の青枠が別の canvas 要素の青枠をクリップ・拡大して表示。

Mozilla は正しく対応できていない。Bug 306752 参照。但し、おなじ事を行うスクリプトを書くことは出来る。

サンプル中で使われている canvas 要素

サンプル中で使われている画像

コード

function draw() {
  var img = new Image();
  img.src = 'image.png';

  var canvas = document.getElementById('canvas');
  if (!canvas.getContext) return;
  var ctx = canvas.getContext('2d');
  ctx.save();

  var canvas2 = document.getElementById('canvas2');
  var ctx2 = canvas2.getContext('2d');
  ctx2.strokeStyle = 'green';
  ctx2.strokeRect(0,0, 100, 100);
  ctx2.strokeStyle = 'blue';
  ctx2.strokeRect(20,40,70,45);

  ctx.drawImage(img, 0, 0);
  
  ctx.drawImage(img, 100, 0, 30, 30);
  
  ctx.drawImage(canvas2, 20, 40, 70, 45, 150, 140, 140, 90);
}