Colors
The COLOR statement in QuickBasic allows one to change the text/background. The sixteen colors available are (names from QBasic Wikibook; hexadecimal from QB64 Wiki):
- 00: Black – #000050
- 01: Dark Blue – #0000A8
- 02: Dark Green – #00A800
- 03: Dark Cyan – #00A8A8
- 04: Dark Red – #A80000
- 05: Dark Purple – #A800A8
- 06: Orange Brown – #A85400
- 07: Grey – #A8A8A8
- 08: Dark Grey – #545454
- 09: Light Blue – #5454FC
- 10: Light Green – #54FC54
- 11: Light Cyan – #5454FC
- 12: Light Red – #FC5454
- 13: Magenta – #FC54FC
- 14: Yellow – #FCFC54
- 15: White – #FCFCFC
Circles
The QBasic Wikibook shows the CIRCLE command as follows:
CIRCLE ([X Coordinate], [Y Coordinate]), [Radius], [Color Number]
QB64’s Wiki shows:
CIRCLE [STEP](Column,Row), radius%, [color%][, startRadian!, stopRadian!][, aspect!]
Thankfully, when I posted this question on StackOverflow, wolfhammer provided a complex example including a reusable function to achieve the same effect with JavaScript:
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>
Rectangles
In QuickBasic rectangles are drawn using lines. The syntax (according to QB64 Wiki) looks like:
LINE [STEP] [(column1, row1)]-[STEP] (column2, row2), color[, [{B|BF}]m style%]
Using the B option one can create an outlined box, using the coordinates specified as diagonal corners of the box. Using BF will create a filled box (e.g., with a color).