canvas arcs

_.md

[ Launch: canvas arcs ] 3786a097f47196ebe119 by georules

config.json

{"description":"canvas arcs","endpoint":"","display":"canvas","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"inline-console":true}

inlet.js

var canvas = document.getElementsByClassName('tributary_canvas');
console.log(canvas)
canvas = canvas[0]

radius = 50

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  
  for(var i=0;i<4;i++){
    for(var j=0;j<3;j++){
      var path = new Path2D();
      var x = radius+1+j*2*radius; // x coordinate
      var y = radius+1+i*2*radius; // y coordinate
      var radius = radius; // Arc radius
      var startAngle = 0; // Starting point on circle
      var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle
      var anticlockwise = i%2===0 ? false : true; // clockwise or anticlockwise
      
      path.arc(x, y, radius, startAngle, endAngle, anticlockwise);
      
      if (i>1){
        ctx.fill(path);
      } else {
        ctx.stroke(path);
      }
      
    }
  }
  
}