JSFiddle - React, Tailwind, and code Playground

by mvasilkov

HTML

<p>Рисование этой безобразной картинки продолжалось <span id="timeit">несколько</span> секунд.</p>
<canvas id="hexgrid" width="500" height="500"></canvas>

CSS

p {
    font: 13px / 20px Consolas, Monaco, monospace;
    margin: 5px 0;
}

JavaScript

var canvas = document.getElementById('hexgrid');
var ctx = canvas.getContext('2d')

var a = 5,
    h = (Math.sqrt(3) / 2) * a,
    board_width = 30,
    board_height = 90

var draw_hex_sprite = function(a) {    
    ctx.beginPath()
    ctx.moveTo(0, h + 1)
    ctx.lineTo(0.5 * a, 1)
    ctx.lineTo(1.5 * a, 1)
    ctx.lineTo(2 * a, h + 1)
    ctx.lineTo(1.5 * a, (2 * h) + 1)
    ctx.lineTo(0.5 * a, (2 * h) + 1)
    ctx.lineTo(0, h + 1)
    ctx.fillStyle = '#0080ff'
    ctx.fill()
    ctx.stroke()
}

var draw_odd_line = function(img, offset) {
    var x = a / 2,
        y = h + 1
    for (var i = 0; i < board_width; ++i) {
        ctx.globalAlpha = Math.random()
        ctx.drawImage(img, x, y + (2 * offset * h))
        x += 3 * a
    }
}

var draw_even_line = function(img, offset) {
    var x = a,
        y = (2 * h) + 1
    for (var i = 0; i < board_width - 1; ++i) {
        ctx.globalAlpha = Math.random()
        ctx.drawImage(img, x + a, y + (2 * offset * h))
        x += 3 * a
    }
}

var draw_grid = function() {
    var timeit_stop = timeit()
    draw_hex_sprite(a)
    
    var hex_sprite = new Image()
    var dataURL = canvas.toDataURL()
    hex_sprite.src = dataURL

    ctx.clearRect(0, 0, canvas.width, canvas.height)
    
    hex_sprite.onload = function() {
        for (var i = 0; i < board_height; ++i) {
            [draw_even_line, draw_odd_line][i & 1](this, 0 | i / 2 + 0.5)
        }
        timeit_stop()
    }
}

function timeit() {
    var start = Date.now()
    return function () {
        var stop = Date.now(),
            result = ((stop - start) / 1000).toFixed(2)
        document.getElementById('timeit').firstChild.nodeValue = result
    }
}

draw_grid()