0

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

Dave Mackey
  • 4,306
  • 21
  • 78
  • 136
  • 1
    Possible duplicate of [How to draw an oval in html5 canvas?](http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas) Note that setting the `aspect` parameter of `CIRCLE` to something other than 1 makes it draw an oval instead of a circle. –  Oct 20 '16 at 04:12
  • Use `ctx.scale` to set the aspect, `ctx.arc` to create the path. Before you render restore the scale to square, then call `ctx.stroke`. If you do not restore the scale to the square aspect the line width will vary over the arc – Blindman67 Oct 20 '16 at 06:33

1 Answers1

2

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>
wolfhammer
  • 2,641
  • 1
  • 12
  • 11
  • 1
    Was going to say "only on chrome" but a quick check and looks like the big 3 (firefox, chrome, edge) all now support ellipse. Yay for common sense and hello to the finally usable `ctx.ellipse` function...+1 – Blindman67 Oct 20 '16 at 09:56
  • Thanks so much for this! It has been a while since I posted it, but this is exactly what I need...project ended up being laid aside for a bit, but I'm back at it now. – Dave Mackey Nov 22 '16 at 02:02