canvas draw test

by falldeaf

HTML

<img id="img" src="https://static.thenounproject.com/png/364-42.png">
<canvas id="c" height="300" width="300"></canvas>

CSS

#c {
  border: 1px solid blue;
}

JavaScript

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

ctx.strokeStyle = "#ff0000";
ctx.lineWidth = 1;
ctx.strokeRect(0, 0, 10, 10);

var img = new Image();
img.onload = () => {
	ctx.drawImage(document.getElementById('img'), 10, 10);
  //ctx.clearRect(0,0,300,300);
}
img.src = "https://static.thenounproject.com/png/364-42.png";

ctx.font = "30px Arial";
ctx.fillText("Hello World", 100, 100); 

ctx.drawImage(document.getElementById('img'), 100, 100);

//ctx.fillStyle = "rgba(0, 0, 0, 1)";
//ctx.fillRect(0,0,300,300);
//ctx.clearRect(0,0,300,300);