javascripthtmlhtml5-canvasbasicquickbasic

How Could One Write This BASIC Circle Statement in JavaScript?


I have some old QuickBasic code (yes, really) that I'm working on rewriting in JavaScript. In QuickBasic a circle is defined like so:

CIRCLE (column, row), radius, color, startRadian, stopRadian, aspect

In JavaScript on the HTML5 canvas like so:

c.arc(column, row, radius, startAngle, endAngle, counterclockwise);

As one can see, the statements are fairly similar - except that QuickBasic has parameters for color and aspect.

I can use context.strokeStyle to handle the color, but I'm unsure of how to handle the aspect? What JavaScript command would I use to accomplish a similar effect as that described by QuickBasic via the aspect parameter?

In this case aspect can be defined as:

"SINGLE values of 0 to 1 affect the vertical height and values over 1 affect the horizontal width of an ellipse. Aspect = 1 is a normal circle." - QB64 Wiki

1 http://www.qb64.net/wiki/index.php?title=CIRCLE


Solution

  • Here's a CIRCLE function using javascript ellipse that effects vertical and horizontal for aspect.

    var can = document.getElementById('can');
    var ctx = can.getContext('2d');
    var w = can.width;
    var h = can.height;
    var x = w/2;
    var y = h/2;
    var radius = 30;
    var startAngle = 0;
    var endAngle = Math.PI*2;
    var color = 'red';
    
    CIRCLE(x, y, radius, color, startAngle, endAngle, .5);
    CIRCLE(x+10, y+10, radius, 'blue', startAngle, endAngle, 1.5);
    
    function CIRCLE (column, row, radius, color, startRadian, stopRadian, aspect) {
      var rotation = 0;
      var anticlockwise = 0;
      
      if (aspect == 1) {
        var rx = radius;
        var ry = radius;
      } else if(aspect < 1) {
        var rx = radius * aspect;
        var ry = radius;
      } else if(aspect > 1) {
        var rx = radius;
        var ry = radius * (aspect-1);
      }
      
      ctx.fillStyle=color;
      ctx.beginPath();
      ctx.ellipse(x, y, rx, ry, rotation, startAngle, endAngle, anticlockwise);
      ctx.fill(); 
    }
    <canvas id='can' width='200' height='150'></canvas>