Javascript Snowflake Fractal

var canvas_width = 500;
var canvas_height = 500;
var coor_width = 2;
var coor_height = 2;

var context;
var xs;
var ys;
var color = "rgb(255,0,0)";

function run(canvas_id, next_id, restart_id) {
    var canvas = document.getElementById(canvas_id);
    var next = document.getElementById(next_id);
    var restart = document.getElementById(restart_id);

    xs = new Array();
    ys = new Array();
    context = canvas.getContext("2d");

    add_point(xs, ys, -.5, -.5);
    add_point(xs, ys, .5, -.5);
    add_point(xs, ys, .5, .5);
    add_point(xs, ys, -.5, .5);

    draw_lines();

    next.onclick = next_iteration;
    restart.onclick = restart_iters;
}

function restart_iters() {
    context.clearRect(0, 0, 500, 500);
    xs = new Array();
    ys = new Array();

    add_point(xs, ys, -.5, -.5);
    add_point(xs, ys, .5, -.5);
    add_point(xs, ys, .5, .5);
    add_point(xs, ys, -.5, .5);

    draw_lines();
}

function add_point(xs, ys, x, y) {
    xs.push(x);
    ys.push(y);
}

function coor_to_canvas(x, y) {
    var cx = Math.round(canvas_width / 2 + canvas_width * x / coor_width);
    var cy = Math.round(canvas_height / 2 - canvas_height * y / coor_height);

    return [cx, cy];
}

function draw_lines() {
    context.fillColor = color;
    context.clearRect(0, 0, 500, 500);

    context.beginPath();
    var cx;
    var cy;
    var x;
    var y;

    x = xs[0];
    y = ys[0];

    var res = coor_to_canvas(x, y);
    cx = res[0];
    cy = res[1];

    context.moveTo(cx, cy);

    for (var i = 1; i < xs.length; i += 1) {
    var x = xs[i];
    var y = ys[i];

    res = coor_to_canvas(x, y);
    cx = res[0];
    cy = res[1];

    context.lineTo(cx, cy);
    }

    x = xs[0];
    y = ys[0];
    res = coor_to_canvas(x, y);
    cx = res[0];
    cy = res[1];
    context.lineTo(cx, cy);
    context.closePath();
    context.stroke();
}


function next_iteration() {
    var x1;
    var y1;
    var x4;
    var y4;

    var new_xs = new Array();
    var new_ys = new Array();

    for (var i = 1; i <= xs.length; i += 1) {
    var x1 = xs[(i - 1) % xs.length];
    var y1 = ys[(i - 1) % xs.length];
    var x4 = xs[i % xs.length];
    var y4 = ys[i % xs.length];

    var L = Math.sqrt((x1 - x4) * (x1 - x4) + (y1 - y4) * (y1 - y4));

    var w = x4 - x1;
    var h = y4 - y1;
    var theta = Math.atan2(w, h);

    var hh = (L/3) * Math.tan(Math.PI / 6)
    var LL = Math.sqrt(L * L / 9 + hh * hh);

    var x2 = x1 + LL * Math.sin(theta + Math.PI / 6);
    var y2 = y1 + LL * Math.cos(theta + Math.PI / 6);
    var x3 = x4 + LL * Math.sin(Math.PI + theta + Math.PI / 6);
    var y3 = y4 + LL * Math.cos(Math.PI + theta + Math.PI / 6);

    add_point(new_xs, new_ys, x2, y2);
    add_point(new_xs, new_ys, x3, y3);
    add_point(new_xs, new_ys, x4, y4);
    }

    xs = new_xs;
    ys = new_ys;

    draw_lines();
}