Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <canvas id="canvas1" width="400" height="300"></canvas>
</body>
</html>
 
// Images used are 200px X 200px
var context = document.getElementById("canvas1").getContext("2d");
var img1 = new Image();
img1.src = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRckwTqOS6QNA38iTUTPdGA6OpDFpWCZAE2o0bENkLRdguLjPv_";
var img2 = new Image();
img2.src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRKEM8dRKPPegdwqODTdsZ6zUHlJkm4HAqRIu8WRM4s-JrA1u_p";
  
img1.onload = function() {
  context.drawImage(img1, 0, 0);
  context.font="20px Georgia";
  context.strokeText("Before",40,img1.height+20);
};
img2.onload = function() {
  context.drawImage(img2,img1.width,0);
  context.font="20px Georgia";
  context.strokeText("After",img1.width + 60,img1.height+20);
};
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x