JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <link href="canvas.css" rel="stylesheet" type="text/css"/> 
    </head>
    <body>
        <div id="canvcont">
            <canvas id="mycanvas" width="300" height="300"></canvas>
            <div>
                <input type="button" id="clear_button" value="cleardabrot" />
                <input type="button" id="refill_button" value="refilldabrot" />
            </div>
        </div>
        <div id="message"></div>
    </body>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery.json-2.2.min.js"></script>
    <script type="text/javascript" src="canvas.js"></script>
</html>

CSS

canvas { 
    border: 1px solid black;
    /*border-radius:5px;
    -webkit-border--radius:5px;
    -moz-border-radius:5px;*/
}
#canvcont {
    background-color:#999;
}

JavaScript

function ComplexNumber(real,imaginary){
    this[0] = real;
    this[1] = imaginary;
    this.real = real;
    this.imaginary = imaginary;
}
ComplexNumber.prototype.add = function(){
    // if one argument, assume complexnumber, if two, assume real/imaginary
    if(arguments.length == 1){
        return new ComplexNumber(this.real + arguments[0][0], this.imaginary + arguments[0][1]);
    } else {
        return new ComplexNumber(this.real + arguments[0], this.imaginary + arguments[1]);
    }
};
ComplexNumber.prototype.sub = function(){
    // if one argument, assume complexnumber, if two, assume real/imaginary
    if(arguments.length == 1){
        return new ComplexNumber(this.real - arguments[0][0], this.imaginary - arguments[0][1]);
    } else {
        return new ComplexNumber(this.real - arguments[0], this.imaginary - arguments[1]);
    }
};
ComplexNumber.prototype.mult = function(){
    // if one argument, assume complexnumber, if two, assume real/imaginary
    var multiplier = arguments[0];
    if(arguments.length != 1){
        multiplier = new ComplexNumber(arguments[0], arguments[1]);
    } 
    return new ComplexNumber(this[0]*multiplier[0] - this[1]*multiplier[1], this[0]*multiplier[1] + this[1]*multiplier[0]);
};
ComplexNumber.prototype.modSquared = function(){
    return this[0]*this[0] + this[1]*this[1];
};
ComplexNumber.prototype.mod = function(){
    return Math.sqrt(this.normSquared());
};
ComplexNumber.prototype.toString = function(){
    return this[0]+"+"+this[1]+"i";
};

var canvas;
var ctx;
var w;
var h;
var img;
var dataset = [];

//init

$(document).ready(function() {
    init();
});

function init() {
    if ($('#mycanvas')[0].getContext) {
        canvas = $('#mycanvas')[0];
        ctx = canvas.getContext('2d');
        w = canvas.width;
        h = canvas.height;
        
        if (ctx.createImageData) {
            img = ctx.createImageData(w, h);
        } else if (ctx.getImageData) {
            img = ctx.getImageData(0, 0, w,...