canvas 画像操作

by yshrkn

HTML

<canvas id="board" width="400" height="400"></canvas>
<canvas id="board2" width="50" height="50"></canvas>
<img id="image">

JavaScript

var canvas = document.getElementById("board");
var canvas2 = document.getElementById("board2");

if (canvas.getContext) { 
  var ctx = canvas.getContext("2d");
  var ctx2 = canvas.getContext("2d");
}

// 画像表示
var img = new Image();
img.src = "https://naturobo.com/wp-content/uploads/2017/06/KAZTDSCF7026_TP_V.jpg";

img.onload = function () { 
  ctx.drawImage(img, 0, 0);
}


// canvasで表示したものを画像表示
ctx2.beginPath();
ctx2.fillStyle = "#f00";
ctx2.arc(20, 20, 20, 0, Math.PI * 2, false);
ctx2.fill();
  
// Canvsasの画像変換
var imgData = canvas.toDataURL();
var image = document.getElementById("image");
  
// img要素へ変換した画像ファイルの追加
image.src = imgData;