Inputs

index.html

<h1>Working with Input Types</h1>

<canvas id="can"></canvas>

<input id="clr" type="color"
       onchange="setColor()">

<input id="rng" type="range"
       onchange="doSquare()">

inputs.markdown

Inputs

A Pen by Theodore Rand on CodePen.

License.

script.js

function setColor() {
  var canvas = document.getElementById("can");
  var color = document.getElementById("clr");
  canvas.style.backgroundColor = color.value;
}

function doSquare() {
  var canvas = document.getElementById("can");
  var range = document.getElementById("rng");
  var sideL = range.value;
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.fillStyle = "yellow";
  ctx.fillRect(10,10,sideL, sideL);
  ctx.fillRect(sideL + 2,10,sideL, sideL);
}

style.css

#can {
  width:100px;
  height:100px;
  border: 1px solid grey;
}