A Pen by JonnyNinetoes

Thumbnail
This awesome code was written by JonnyNineToes, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright JonnyNineToes ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  JonnyNinetoes</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <canvas id="c"></canvas>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/JonnyNineToes/a-pen-by-jonnyninetoes-xjEoPZ */
canvas {
	margin: 1em;
	border: 1px solid red;
}

/*Downloaded from https://www.codeseek.co/JonnyNineToes/a-pen-by-jonnyninetoes-xjEoPZ */
var cvs = document.getElementById("c");

if (cvs.getContext) {
	var ctx = cvs.getContext("2d");

	var data = "data:image/png;base64,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";

	function createSpriteFromBase64(base64) {
		let temp = new Image();
		
		temp.src = base64;
		temp.onload = function() {
			console.log(temp);
			// alert(temp);
		}
		return temp;
	}
	
	var final = createSpriteFromBase64(data);
	
	ctx.drawImage(final, 0, 0);
	ctx.drawImage(final, 64, 0);
	ctx.drawImage(final, 0, 32);
	ctx.drawImage(final, 32, 16);
}

Comments