Interactive canvas & HTML5 inputs

Interactive canvas using html5 form’s inputs.


Look at the code
<style>
canvas{
width: 100%;
max-width: 370px;
}
</style>
<section>
<p>
<label for="inputColor">Change the color</label>
<input type="color" id="inputColor" list="colorList">
<datalist id="colorList">
<option value="#FF0000">Red</option>
<option value="#800000">Maroon</option>
<option value="#000000">Black</option>
</datalist>
</p>
<br>
<p>
<label for="inputSize">Chnage the size</label>
<input type="range" id="inputSize" min="0" max="10" step="1" list="tickMarks" value="10">
<datalist id="tickMarks">
<option value="0"></option>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
<option value="6"></option>
<option value="7"></option>
<option value="8"></option>
<option value="9"></option>
<option value="10"></option>
</datalist>
</p>
<br>
</section>
<figure>
<canvas id="canvas" width="370" height="310"></canvas>
<figcaption>bug using canvas scripting API</figcaption>
</figure>

<script>
//canvas global variables
var canvas, ctx, w, h, requestId;
var bugColor = "#dd9420", bugSeparators = "#ffffff", bugSize = 1;
//input global variales
var inputColor, inputSize, inputRotate;

window.onload = load;

function load() {
  //listeners and initiate
  //#inputColor
  inputColor = document.querySelector("#inputColor");
  inputColor.setAttribute('value',bugColor);
  inputColor.addEventListener('input', changeColor, false);
  //#inputSize
  inputSize = document.querySelector("#inputSize");
  inputSize.addEventListener('input', changeSize, false);
  //canvas settingd
  canvas = document.querySelector("#canvas");
  ctx = canvas.getContext("2d");
  w = canvas.width;
  h = canvas.height;

  drawLogo();

}

//callbacks
function changeColor(evt) {
  bugColor = evt.target.value;
  ctx.clearRect(0,0,w,h);
  if( bugSize < 1 ){
    ctx.save();
    ctx.scale(bugSize,bugSize);
  }
  drawLogo();
  ctx.restore();
}
function changeSize(evt) {
  bugSize = evt.target.value/10;
  ctx.clearRect(0,0,w,h);
  ctx.save();
  ctx.scale(bugSize,bugSize);
  drawLogo();
  ctx.restore();
}

function drawLogo() {//drawing the logo
  //save before and restore after drawing

  // #body
  ctx.save();
	ctx.beginPath();
	ctx.fillStyle = bugColor;
	ctx.moveTo(184.427000, 35.014000);
	ctx.bezierCurveTo(242.917269, 35.014000, 290.333000, 94.109279, 290.333000, 167.007000);
	ctx.bezierCurveTo(290.333000, 239.904721, 242.917269, 299.000000, 184.427000, 299.000000);
	ctx.bezierCurveTo(125.936731, 299.000000, 78.521000, 239.904721, 78.521000, 167.007000);
	ctx.bezierCurveTo(78.521000, 94.109279, 125.936731, 35.014000, 184.427000, 35.014000);
	ctx.fill();
  ctx.restore();

  // #separator_body
  ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = bugSeparators;
	ctx.lineWidth = 16.000000;
	ctx.lineCap = 'round';
	ctx.miterLimit = 10;
	ctx.moveTo(110.969000, 84.500000);
	ctx.bezierCurveTo(110.969000, 102.462000, 145.031000, 121.000000, 185.893000, 121.000000);
	ctx.lineTo(185.161000, 121.000000);
	ctx.bezierCurveTo(226.019000, 121.000000, 257.970000, 103.211000, 257.970000, 85.250000);
	ctx.stroke();
  ctx.restore();

  // #separator_head
  ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = bugSeparators;
	ctx.lineWidth = 16.000000;
  ctx.lineCap = 'round';
	ctx.miterLimit = 10;
	ctx.moveTo(184.000000, 292.000000);
	ctx.lineTo(184.000000, 130.000000);
	ctx.stroke();
  ctx.restore();

  // #legs

  // #leg_1
  ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = bugColor;
	ctx.lineWidth = 16.000000;
	ctx.lineCap = 'round';
	ctx.lineJoin = 'bevel';
	ctx.miterLimit = 10;
	ctx.moveTo(39.250000, 89.820000);
	ctx.lineTo(80.500000, 107.191000);
	ctx.lineTo(88.750000, 132.463000);
	ctx.stroke();
  ctx.restore();

  // #leg_2
  ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = bugColor;
	ctx.lineWidth = 16.000000;
	ctx.lineCap = 'round';
	ctx.lineJoin = 'bevel';
	ctx.miterLimit = 10;
	ctx.moveTo(331.004000, 89.820000);
	ctx.lineTo(289.754000, 107.191000);
	ctx.lineTo(281.504000, 132.463000);
	ctx.stroke();
  ctx.restore();

  // #leg_3
  ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = bugColor;
	ctx.lineWidth = 16.000000;
	ctx.lineCap = 'round';
	ctx.lineJoin = 'bevel';
	ctx.miterLimit = 10;
	ctx.moveTo(61.042000, 298.726000);
	ctx.lineTo(61.238000, 253.951000);
	ctx.lineTo(93.956000, 236.299000);
	ctx.stroke();
  ctx.restore();

  // #leg_4
  ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = bugColor;
	ctx.lineWidth = 16.000000;
	ctx.lineCap = 'round';
	ctx.lineJoin = 'bevel';
	ctx.miterLimit = 10;
	ctx.moveTo(308.945000, 298.726000);
	ctx.lineTo(308.750000, 253.951000);
	ctx.lineTo(276.032000, 236.299000);
	ctx.stroke();
  ctx.restore();

  // #leg_5
  ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = bugColor;
	ctx.lineWidth = 16.000000;
	ctx.lineCap = 'round';
	ctx.lineJoin = 'bevel';
	ctx.miterLimit = 10;
	ctx.moveTo(359.834000, 193.660000);
	ctx.lineTo(325.649000, 164.742000);
	ctx.lineTo(290.982000, 178.170000);
	ctx.stroke();
  ctx.restore();

  // #leg_6
  ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = bugColor;
	ctx.lineWidth = 16.000000;
	ctx.lineCap = 'round';
	ctx.lineJoin = 'bevel';
	ctx.miterLimit = 10;
	ctx.moveTo(9.982000, 193.660000);
	ctx.lineTo(44.167000, 164.742000);
	ctx.lineTo(78.834000, 178.170000);
	ctx.stroke();
  ctx.restore();

  // #aerials

  // #aerialleft
  ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = bugColor;
	ctx.lineWidth = 16.000000;
	ctx.lineCap = 'round';
	ctx.lineJoin = 'bevel';
	ctx.miterLimit = 10;
	ctx.moveTo(169.250000, 38.014000);
	ctx.lineTo(132.250000, 20.080000);
	ctx.lineTo(98.000000, 10.335000);
	ctx.stroke();
  ctx.restore();

  // #aerial_right
  ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = bugColor;
	ctx.lineWidth = 16.000000;
	ctx.lineCap = 'round';
	ctx.lineJoin = 'bevel';
	ctx.miterLimit = 10;
	ctx.moveTo(202.000000, 38.014000);
	ctx.lineTo(239.000000, 20.080000);
	ctx.lineTo(273.250000, 10.335000);
	ctx.stroke();
  ctx.restore();

}

</script>