Warning!

This page applies to an older version of Orbited (Version 0.5) For info on the current version see the main documentation.

Canvas Shapes Demo

(from this blog post)

Code

<canvas id="shapes" width="400" height="250"></canvas><br>
<input type="button" value="Refresh" id="refresh" onclick="draw();" style="font-size:200%;">
<script>

  var circle = function (context, x, y, radius) {
    var c = context;
    c.beginPath();
    c.arc(x,y,radius,0,Math.PI*2, false);
    c.closePath();
  };


  var regularPolygon = function (context, x, y, radius, angle, sides) {
    var c = context;
    var inner_angle = (2.0 * Math.PI) / sides;
    c.save();
    c.beginPath();
    c.translate(x,y);
    c.rotate(angle);
    c.scale(radius, radius);
    c.moveTo(1,0);
    for (var i=0; i < sides; i++) {
      c.rotate(inner_angle);
      c.lineTo(1,0);
    };
    c.closePath();
    c.restore();
  };

  var regularQuadraticStar = function (context, x, y, radius, angle, sides) {
    var c = context;
    var inner_angle = (2.0 * Math.PI) / sides;
    c.save();
    c.beginPath();
    c.translate(x,y);
    c.rotate(angle);
    c.scale(radius, radius);
    c.moveTo(1,0);
    for (var i=0; i < sides; i++) {
      c.rotate(inner_angle);
      ctx.quadraticCurveTo(0,0,1,0);
    };
    c.closePath();
    c.restore();
  };

  var regularStar = function (context, x, y, radius, angle, sides, pointiness) {
    var c = context;
    var half_inner_angle = (Math.PI) / sides;
    c.save();
    c.beginPath();
    c.translate(x,y);
    c.rotate(angle);
    c.scale(radius, radius);
    c.moveTo(1,0);
    for (var i=0; i < sides; i++) {
      c.rotate(half_inner_angle);
      ctx.lineTo(1 - pointiness, 0);
      c.rotate(half_inner_angle);
      ctx.lineTo(1,0);
    };
    c.closePath();
    c.restore();
  };
  
  var uniform_random = function (low, high) {
    if (typeof(high) === 'undefined') {
      high = low;
      low = 0;
    }
    return low + (high - low) * Math.random();
  };

  var random_int = function (low, high) {
    return Math.floor(uniform_random(low, high));
  }

  var random_choice = function (array) {
    var choice = Math.floor(Math.random() * array.length);
    return array[choice];
  };

  var random_color = function() {
    var r = random_int(30, 256).toString();
    var g = random_int(30, 256).toString();
    var b = random_int(30, 256).toString();
    var a = uniform_random(0.2, 1.0).toString();
    return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')'
  }

  var randomShape = function (context, width, height, maxradius) {
    context.save()
  
    var minradius = 0.1 * maxradius;
    var minstroke = 0.5;
    var maxstroke = 5.0;
  
    var x = uniform_random(0, width);
    var y = uniform_random(0, height);
    var radius = uniform_random(minradius, maxradius);
    var angle = uniform_random(0.0, 2.0 * Math.PI);
    var sides = random_int(3,9);
    var pointiness = uniform_random(0.3, 0.9);
  
    var shape = random_choice([circle, regularPolygon, regularQuadraticStar, regularStar]);
  
    context.fillStyle = random_color();
    context.strokeStyle = random_color();
    context.lineJoin = random_choice(['round', 'bevel', 'miter']);
    context.miterLimit = 10;
    context.lineWidth = uniform_random(minstroke, maxstroke);
    
    shape(context, x, y, radius, angle, sides, pointiness);
    context.fill();
    shape(context, x, y, radius, angle, sides, pointiness);
    context.stroke();

    context.restore()
  };

  var canvasElement = document.getElementById("shapes");
  var ctx = canvasElement.getContext("2d");
  
  var draw = function () {
    ctx.save();
    ctx.fillStyle = 'rgb(0, 0, 0)';
    ctx.fillRect(0,0,400,250);
    ctx.restore();

    for (var i=0; i < 50; i++) {
      randomShape(ctx, 400, 250, 30);
    };    
  };
  draw();
</script>