Playable code

In this example below you will see how to do a Playable code with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by AlisonBuki, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright AlisonBuki ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Playable code</title>
  
  
  
  
  
</head>

<body>

  <!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient -->

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
var gradient = ctx.createRadialGradient(20,100,0,100,100,0);
gradient.addColorStop(0,"black");
gradient.addColorStop(1,"transparent");
ctx.fillStyle = gradient;
ctx.fillRect(0,0,200,200);</textarea>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/AlisonBuki/playable-code-KoWNwx */
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Comments