Testing Testing

viewof gradient = html`<input type="range" min="0" max="800" value="50"></input>`

// Create a canvas element
{
  const canvas = DOM.canvas(400, 300);
  const context = canvas.getContext("2d");
  const width = canvas.width;
  const height = canvas.height;

  // Define the line function
  function drawLine(gradient) {
    context.clearRect(0, 0, width, height);
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(width, gradient * width);
    context.strokeStyle = "blue";
    context.stroke();
  }

  // Observe changes in the gradient value
  {
    const update = {
      width,
      height,
      value: viewof gradient
    };
    viewof gradient.observe(function(value) {
      update.value = value;
      drawLine(value);
    });
  }

  // Draw initial line
  drawLine(viewof gradient.value);

  // Return canvas
  return canvas;
}