A Pen by Muhammad

Thumbnail
This awesome code was written by inelei, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright inelei ©
  • HTML
  • CSS
  • JavaScript
    <html>
  <head>
    <title>Lesson 3</title>
  </head>
  <body>
    <h1>Color choose</h1>
    
    <canvas id="canvas"></canvas>
    
    <div>
      <input type="color" value="#ff8000" id="col" onchange="setColor()" />
      <input type="range" min="10" max="100" value="10" id="slide" oninput="doSquare()" />
    </div>
  </body>
</html>

/*Downloaded from https://www.codeseek.co/inelei/a-pen-by-muhammad-egodvg */
    canvas {
  border: 1px solid Grey;
  width: 200px;
  height: 100px;
}


/*Downloaded from https://www.codeseek.co/inelei/a-pen-by-muhammad-egodvg */
    function setColor() {
  var canvas = document.getElementById("canvas");
  var colorPic = document.getElementById("col");
  canvas.style.backgroundColor = colorPic.value;
}

function doSquare() {
  var getRange = document.getElementById("slide");
  var pos = getRange.value;
  var canvas = document.getElementById("canvas");
  var holst = canvas.getContext("2d");
  holst.clearRect(0, 0, canvas.width, canvas.height);
  holst.fillStyle = "yellow";
  holst.fillRect(pos, 10, 50, 50);
}

Comments