JSFiddle - React, Tailwind, and code Playground

by mvasilkov

HTML

<canvas id=c width=296 height=148></canvas>
<p id=o>out</p>

CSS

canvas { display: block }
#c { background: #34495e /* url(http://i.imgur.com/Q0IXu2r.png) center no-repeat */ }

JavaScript

var canvas = document.getElementById('c'),
    c = canvas.getContext('2d'),
    out = document.getElementById('o'),
    points = [
        1,   143,
        24,  103,
        103, 6,
        115, 6,
        141, 8,
        182, 1,
        195, 5,
        295, 147,
        0,   0,
        36,  142,
        77,  59,
        100, 28,
        0,   0,
        249, 145,
        211, 57,
        0,   0,
        144, 145,
        141, 110,
        143, 65,
        0,   0        
    ]

c.fillStyle = 'rgba(241, 196, 15, 0.4)'
c.lineWidth = 2
c.strokeStyle = 'rgba(231, 76, 60, 1)'

c.beginPath()

for (var i = 0; i < points.length - 1; i += 2) {
    if (points[i]) {
        c.lineTo(points[i], points[i + 1])
    }
    else {
        c.stroke()
        c.beginPath()
    }
}

// c.fill()

canvas.onclick = function (event) {
    var result = 'x=' + (event.pageX - canvas.offsetLeft)
    result += ' y=' + (event.pageY - canvas.offsetTop)
    out.innerHTML = result
}