Twindragon of the original screen size (640×350)

by Maccimo

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Twindragon Curve (640&times;350)</title>
    </head>
    <body onload="launchDragons();">
        <h1>Twindragon Curve</h1>
        <p>Here you can find a result of the <a href="https://codegolf.stackexchange.com/a/176846">tiny DOS demo</a> reverse engineering. This is original screen size (640&times;350) version.</p>
        <p>Write-up can be found here: <a href="https://habr.com/ru/articles/881264/">https://habr.com/ru/articles/881264/</a><br /> Only in Russian language so far.</p>
        <br />
        <canvas id="screen" width="640" height="350" alt="Here be dragons!" title="Hic sunt dracones!">
        </canvas>
    </body>
</html>

CSS

body {
    background-color: white;
}

h1 {
    font-family: sans-serif;
}

canvas#screen { 
    background-color: black;
}

JavaScript

const COLORS = [
    "#000000",
    "#000080",
    "#008000",
    "#008080",
    "#800000",
    "#800080",
    "#808000",
    "#c0c0c0",
    "#808080",
    "#0000ff",
    "#00ff00",
    "#00ffff",
    "#ff0000",
    "#ff00ff",
    "#ffff00",
    "#ffffff"
];

const SCREEN_WIDTH = 640;
const SCREEN_HEIGHT = 350;
const HORIZONTAL_OFFSET = 0;
const VERTICAL_OFFSET = 0;

const DRAW_AXIS = false;
const AXIS_COLOR = "#00ff00";

const BATCH_SIZE = 2557;

const DELAY = 1;

function TwinDragon(
    context,
    screenWidth, 
    screenHeight,
    horizontalOffset,
    verticalOffset,
    showAxis,
    axisColor,
    batchSize
) {
    this.context = context;
    this.screenWidth = screenWidth;
    this.screenHeight = screenHeight;
    this.horizontalOffset = horizontalOffset;
    this.verticalOffset = verticalOffset;
    this.showAxis = showAxis;
    this.axisColor = axisColor;
    this.batchSize = batchSize;

    this.flag = false;
    this.counter = 16;
    this.X = 255;
    this.Y = 0;

    this.step = function() {
        // ; adc al, 10h
        // jnc @@1
        if (this.flag) {
            // add al, 17
            this.counter = this.counter + 17;
            // jmp @@2
        } else {
            // @@1:
            // add al, 16
            this.counter = this.counter + 16;
        }
        // @@2:

        this.flag = this.counter > 255;
        this.counter = this.counter % 256;

        // ; sbb dx, cx
        // jnc @@3
        if (this.flag) {
            // sub dx, cx
            // dec dx
            this.Y = this.Y  - (this.X + 1);
            //  jmp @@4
        } else {
            //  @@3:
            //  sub dx, cx
            this.Y = this.Y - this.X;
        }
        //  @@4:

        // sar dx, 01h
        this.flag = (this.Y % 2 != 0);

        this.Y = this.Y >> 1;

        // ; adc dh, bl
        // jnc @@5
        if (this.flag) {
            // add dx, 256
            this.Y = this.Y + 256;
        }
        // @@5:

        // add cx,...