canvas layer

Use the toggle buttons to show/hide the main canvas

by otorineko6790

HTML

<div class="discussion">
  An illustration of both of the HTML5 canvas API gradient definition functions - createRadialGradient and createLinearGradient. Use the toggle buttons to show/hide the main canvas which draws objects using the defined gradients and the two reference canvases
  which show what the underlying gradients look like. I also plotted some reference shapes on the gradients that correspond to the values in the gradient functions. For the radial gradient, this is two circles which define the start and end of the gradient
  region. For the linear gradient, this is the yellow line which defines the direction of the gradient.
</div>
<br/>

<div class="actions">
  <input id="toggle-main" type="button" value="Show/Hide Main" />
  <input id="toggle-radial" type="button" value="Show/Hide Radial Reference" />
  <input id="toggle-linear" type="button" value="Show/Hide Linear Reference" />
</div>
<br/>

<div class="wrapper">
  <canvas id="main"></canvas>
  <canvas id="radial"></canvas>
  <canvas id="linear"></canvas>
</div>

CSS

.wrapper {
  position: relative;
  height: 500px;
}

.wrapper * {
  position: absolute;
}

#main {
  border: 1px dotted black;
}

JavaScript

function drawMain() {
  var $canvas = $('#main'),
    ctx,
    h = 400,
    w = 400;

  $canvas[0].height = h;
  $canvas[0].width = w;

  ctx = $canvas[0].getContext('2d');

  ctx.clearRect(0, 0, w, h);

  rfl = ctx.createRadialGradient(100, 100, 10, 150, 150, 250);

  rfl.addColorStop(0, 'rgba(255,0,0,1)');
  rfl.addColorStop(0.7, 'rgba(255,0,0,0.5)');
  rfl.addColorStop(1, 'rgba(255,0,0,0.2)');

  ctx.fillStyle = rfl;
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 1;

  for (var i = 0; i < 400; i += 100) {
    ctx.beginPath();
    ctx.rect(i, i, 100, 100);
    ctx.stroke();
    ctx.fill();
  }

  grd = ctx.createLinearGradient(100, 100, 150, 300);

  grd.addColorStop(0, 'rgba(0,255,0,0)');
  grd.addColorStop(1, 'rgba(0,0,255,1)');

  ctx.fillStyle = grd;
  ctx.strokeStyle = 'yellow';
  ctx.lineWidth = 1;

  for (var i = 50; i < 400; i += 100) {
    ctx.beginPath();
    ctx.arc(i - 25, 400 - i - 25, 100, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();

    ctx.beginPath();
    ctx.rect(i, 400 - i, 100, 100);
    ctx.stroke();
    ctx.fill();
  }
}

function drawRadialRef() {
  var $canvas = $('#radial'),
    ctx,
    h = 400,
    w = 400;

  $canvas[0].height = h;
  $canvas[0].width = w;

  ctx = $canvas[0].getContext('2d');

  ctx.clearRect(0, 0, w, h);

  ctx.fillStyle = 'rgba(255,0,0,0.2)';
  ctx.fillRect(0, 0, w, h);

  rfl = ctx.createRadialGradient(100, 100, 10, 150, 150, 250);

  rfl.addColorStop(0, 'rgba(255,0,0,1)');
  rfl.addColorStop(0.7, 'rgba(255,0,0,0.5)');
  rfl.addColorStop(1, 'rgba(255,0,0,0.2)');

  ctx.fillStyle = rfl;
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 1;

  ctx.beginPath();
  ctx.arc(150, 150, 250, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.fill();

  ctx.beginPath();
  ctx.arc(100, 100, 10, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.fill();

}

function drawLinearRef() {
  var $canvas = $('#linear'),
    ctx,
    h = 400,
    w = 400,
    tx = 2,
    ty = 0.5;

  $canvas[0].height = h;
  $canvas[0].width = w;

  ctx =...