1D Canvas Demo

Sorry! 1D canvas, like it's 2D big brother, is not supported in non-HTML5 capable browsers (e.g. Internet Explorer). Please try in a different browser.

// Simple

var canvas = document.getElementById('canvas');
var context = canvas.getContext('1d');

context.lineStyle = '#c00';
context.drawLine(20, 100);

context.lineStyle = '#0c0';
context.drawLine(150, 200);
// Gradient

var canvas = document.getElementById('canvas');
var context = canvas.getContext('1d');

var grad = context.createLinearGradient(0, 400);
grad.addColorStop(0, '#00c');
grad.addColorStop(1, '#fff');
context.lineStyle = grad;
context.drawLine(0, 400);
// Rainbow

var canvas = document.getElementById('canvas');
var context = canvas.getContext('1d');

var grad = context.createLinearGradient(0, 400);
grad.addColorStop(0, 'red');
grad.addColorStop((1 / 6), 'orange');
grad.addColorStop((1 / 6), 'orange');
grad.addColorStop((2 / 6), 'yellow');
grad.addColorStop((2 / 6), 'yellow');
grad.addColorStop((3 / 6), 'green');
grad.addColorStop((3 / 6), 'green');
grad.addColorStop((4 / 6), 'blue');
grad.addColorStop((4 / 6), 'blue');
grad.addColorStop((5 / 6), 'indigo');
grad.addColorStop((5 / 6), 'indigo');
grad.addColorStop(1, 'violet');
context.lineStyle = grad;
context.drawLine(0, 400);
// Morse Code
// http://en.wikipedia.org/wiki/Morse_code

var canvas = document.getElementById('canvas');
var context = canvas.getContext('1d');

var message = [
	['dot', 'dash', 'dash', 'dash', 'dash'],
	['dash', 'dot', 'dot'],
	['dot', 'dot', 'dash', 'dot'],
	['dash'],
	['dot', 'dash', 'dash']
];
var sizeDot = 2;
var sizeDash = sizeDot * 3;
var letter, pip;
var cursor = 0;
context.clearLine(0, cwidth);
context.lineStyle = '#000';
for (var i = 0, lenMessage = message.length; i < lenMessage; i++) {
  letter = message[i];
  for (var j = 0, lenLetter = letter.length; j < lenLetter; j++) {
    pip = letter[j];
    if (pip === 'dot') {
      context.drawLine(cursor, sizeDot);
      cursor += sizeDot * 2;
    } else {
      context.drawLine(cursor, sizeDash);
      cursor += sizeDash + sizeDot;
    }
  }
  cursor += sizeDash;
}
// Knight Rider
// http://www.youtube.com/watch?v=94UDaYcUg68

var canvas = document.getElementById('canvas');
var context = canvas.getContext('1d');

var lightWidth = 400 / 9;
var lightPos = 0;
var lightDir = 'forwards';
function draw() {
  context.lineStyle = '#900';
  context.drawLine(0, 400);
  context.lineStyle = '#f93';
  context.drawLine(lightPos, lightWidth);
  if (lightDir === 'forwards') {
    // Draw light trail
    context.lineStyle = '#f60';
    context.drawLine(lightPos - lightWidth, lightWidth);
    context.lineStyle = '#f30';
    context.drawLine(lightPos - (lightWidth * 2), lightWidth);
    context.lineStyle = '#c30';
    context.drawLine(lightPos - (lightWidth * 3), lightWidth);
    context.lineStyle = '#c00';
    context.drawLine(lightPos - (lightWidth * 4), lightWidth);

    // Change direction when it reaches the end
    if (lightPos > 400 - lightWidth) {
      lightPos -= lightWidth;
      lightDir = 'backwards';
    } else {
      lightPos += lightWidth;
    }
  } else {
    // Draw light trail
    context.lineStyle = '#f60';
    context.drawLine(lightPos + lightWidth, lightWidth);
    context.lineStyle = '#f30';
    context.drawLine(lightPos + (lightWidth * 2), lightWidth);
    context.lineStyle = '#c30';
    context.drawLine(lightPos + (lightWidth * 3), lightWidth);
    context.lineStyle = '#c00';
    context.drawLine(lightPos + (lightWidth * 4), lightWidth);

    // Change direction when it reaches the end
    if (lightPos < 0) {
      lightPos += lightWidth;
      lightDir = 'forwards';
    } else {
      lightPos -= lightWidth;
    }
  }
}
kitt = setInterval(draw, 65); // Go, KITT, go!

Opera Software, ever keen to push the boundaries of the web, has proposed the one thing HTML5 is currently missing - a 1D context for the canvas element. At present there are no public builds of the Opera browser which support this, however developers wanting to experiment can use the following script which emulates its functionality:

Download CanvasRenderingContext1D

We have also prepared some simple API documentation covering the new methods.

Thanks go to Stuart Langridge and Jeremy Kwok for coding help.