arvitaly/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<canvas id="viewport"></canvas>
<script id="jsbin-javascript">
var canvas = document.getElementById("viewport"),
  context = canvas.getContext("2d");

make_base();

function make_base() {
  base_image = new Image();
  base_image.src = "https://www.w3schools.com/tags/img_the_scream.jpg";
  base_image.onload = function () {
    context.drawImage(base_image, 0, 0);
  };
}
canvas.toBlob(function (blob) {
  const anchor = document.createElement("a");
  anchor.download = "my-file-name.jpg"; // optional, but you can give the file a name
  anchor.href = URL.createObjectURL(blob);

  anchor.click(); // ✨ magic!

  URL.revokeObjectURL(anchor.href); // remove it from memory and save on memory! 😎
});

const cont = document.createElement("textarea");
cont.cols = 50;
cont.rows = 10;
cont.value = canvas.toDataURL("image/jpg");
document.getElementsByTagName("body")[0].append(cont);
</script>


<script id="jsbin-source-javascript" type="text/javascript">var canvas = document.getElementById("viewport"),
  context = canvas.getContext("2d");

make_base();

function make_base() {
  base_image = new Image();
  base_image.src = "https://www.w3schools.com/tags/img_the_scream.jpg";
  base_image.onload = function () {
    context.drawImage(base_image, 0, 0);
  };
}
canvas.toBlob(function (blob) {
  const anchor = document.createElement("a");
  anchor.download = "my-file-name.jpg"; // optional, but you can give the file a name
  anchor.href = URL.createObjectURL(blob);

  anchor.click(); // ✨ magic!

  URL.revokeObjectURL(anchor.href); // remove it from memory and save on memory! 😎
});

const cont = document.createElement("textarea");
cont.cols = 50;
cont.rows = 10;
cont.value = canvas.toDataURL("image/jpg");
document.getElementsByTagName("body")[0].append(cont);
</script></body>
</html>

## jsbin.vilitak.js
var canvas = document.getElementById("viewport"),
  context = canvas.getContext("2d");

make_base();

function make_base() {
  base_image = new Image();
  base_image.src = "https://www.w3schools.com/tags/img_the_scream.jpg";
  base_image.onload = function () {
    context.drawImage(base_image, 0, 0);
  };
}
canvas.toBlob(function (blob) {
  const anchor = document.createElement("a");
  anchor.download = "my-file-name.jpg"; // optional, but you can give the file a name
  anchor.href = URL.createObjectURL(blob);

  anchor.click(); // ✨ magic!

  URL.revokeObjectURL(anchor.href); // remove it from memory and save on memory! 😎
});

const cont = document.createElement("textarea");
cont.cols = 50;
cont.rows = 10;
cont.value = canvas.toDataURL("image/jpg");
document.getElementsByTagName("body")[0].append(cont);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<canvas id="viewport"></canvas>
	<script id="jsbin-javascript">
	var canvas = document.getElementById("viewport"),
	context = canvas.getContext("2d");

	make_base();

	function make_base() {
	base_image = new Image();
	base_image.src = "https://www.w3schools.com/tags/img_the_scream.jpg";
	base_image.onload = function () {
	context.drawImage(base_image, 0, 0);
	};
	}
	canvas.toBlob(function (blob) {
	const anchor = document.createElement("a");
	anchor.download = "my-file-name.jpg"; // optional, but you can give the file a name
	anchor.href = URL.createObjectURL(blob);

	anchor.click(); // ✨ magic!

	URL.revokeObjectURL(anchor.href); // remove it from memory and save on memory! 😎
	});

	const cont = document.createElement("textarea");
	cont.cols = 50;
	cont.rows = 10;
	cont.value = canvas.toDataURL("image/jpg");
	document.getElementsByTagName("body")[0].append(cont);
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">var canvas = document.getElementById("viewport"),
	context = canvas.getContext("2d");

	make_base();

	function make_base() {
	base_image = new Image();
	base_image.src = "https://www.w3schools.com/tags/img_the_scream.jpg";
	base_image.onload = function () {
	context.drawImage(base_image, 0, 0);
	};
	}
	canvas.toBlob(function (blob) {
	const anchor = document.createElement("a");
	anchor.download = "my-file-name.jpg"; // optional, but you can give the file a name
	anchor.href = URL.createObjectURL(blob);

	anchor.click(); // ✨ magic!

	URL.revokeObjectURL(anchor.href); // remove it from memory and save on memory! 😎
	});

	const cont = document.createElement("textarea");
	cont.cols = 50;
	cont.rows = 10;
	cont.value = canvas.toDataURL("image/jpg");
	document.getElementsByTagName("body")[0].append(cont);
	</script></body>
	</html>