JSFiddle - React, Tailwind, and code Playground

by taylorbuley

HTML

<section id='container'>
    <canvas id='canvas'></canvas>
    <div class='clear'></div>    
</section>

CSS

#container {
     z-index:0;
    background:-moz-linear-gradient(top, #eee, #fff);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#fff));
 width:640px;
 height:360px;
}

#canvas {}
.clear {
 clear:both;   
}

JavaScript

var StormPlayer = {};
var offsetx = 153,
    offsety = 55;
var height = 37;
var width = 19;
var xshift = 18;
var yshift = 0;
var count = 3;

StormPlayer.logo = function(x, y) {
    this.tr = [x + width, y], this.tl = [x, y], this.br = [x + width, y + height], this.bl = [x, y + height];
};

StormPlayer.logo.prototype.draw = function(canvas, ctx) {
    console.log('draw()', canvas, ctx);
    ctx.lineWidth = 3;
    ctx.strokeStyle = '#000';
    ctx.fillStyle = '#fff';
    for (var counter = 0; counter < count; counter += 1) {
        console.log('counter', counter, 'x', xshift, 'y', yshift);
        ctx.beginPath();

        ctx.moveTo(this.tr[0] + xshift * counter, this.tr[1]);

        var control1x = this.tl[0] + xshift * counter,
            control1y = this.tl[1] + yshift * counter,
            control2x = this.tl[0] + xshift * counter,
            control2y = this.tl[1] + yshift * counter,
            pointx = this.bl[0] + xshift * counter,
            pointy = this.bl[1] + yshift * counter;

        ctx.bezierCurveTo(control1x, control1y, control2x, control2y, pointx, pointy);

                var control1x = this.br[0] + xshift * counter,
            control1y = this.br[1] + yshift * counter,
            control2x = this.br[0] + xshift * counter,
            control2y = this.br[1] + yshift * counter,
            pointx = this.tr[0] + xshift * counter,
            pointy = this.tr[1] + yshift * counter;
        ctx.bezierCurveTo(control1x, control1y, control2x, control2y, pointx, pointy);

        ctx.stroke();
        ctx.fill();
    }
};

StormPlayer.logo.prototype.click = function(e) {
    console.log('click()', e.x, e.y);
};


jQuery(document).ready(function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var StormPlayerLogo = new StormPlayer.logo(offsetx, offsety);
    canvas.addEventListener('click', StormPlayerLogo.click, true);
    StormPlayerLogo.draw(canvas, ctx);
});