JSFiddle - React, Tailwind, and code Playground

by baacke

HTML

<canvas id="canvas" height="350px" width="350px"></canvas>

CSS

canvas {border: 1px solid red;
    background-color: black}

JavaScript

drawCanvas();

function drawCanvas() {
    var canvas = document.getElementById('canvas');
    if ( canvas.getContext ){
        var ctx = canvas.getContext('2d'),
            canvasWidth = canvas.width,
            canvasHeight = canvas.height,
            enemyRows = 3;

        for ( var i=0; i<enemyRows; i++ ){
          drawRow( ctx, i );
        } //end for enemyRows
    } //end if canvas.getContext
} //end drawCanvas

function drawRow(ctx, rowNum){
    var xCoordinate = 10,
        yCoordinate = 10;
    
    if ( rowNum % 2 == 1 ){ //if odd
        xCoordinate *= 3; //then stagger
    }
    
    drawEnemy(ctx, {x:xCoordinate, y:yCoordinate+(rowNum*40)});
}

function drawEnemy(ctx, loc){
    ctx.beginPath();
    ctx.fillStyle = "yellow";
    ctx.moveTo(loc.x,loc.y+28);
    ctx.lineTo(loc.x,loc.y+14);
    ctx.bezierCurveTo(loc.x,loc.y+6,loc.x+6,loc.y,loc.x+14,loc.y);
    ctx.bezierCurveTo(loc.x+22,loc.y,loc.x+28,loc.y+6,loc.x+28,loc.y+14);
    ctx.lineTo(loc.x+28,loc.y+28);
    ctx.lineTo(loc.x+23.333,loc.y+23.333);
    ctx.lineTo(loc.x+18.666,loc.y+28);
    ctx.lineTo(loc.x+13,loc.y+23.333);
    ctx.lineTo(loc.x+8.333,loc.y+28);
    ctx.lineTo(loc.x+4.666,loc.y+23.333);
    ctx.lineTo(loc.x,loc.y+28);
    ctx.fill();

    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.moveTo(loc.x+8,loc.y+8);
    ctx.bezierCurveTo(loc.x+5,loc.y+8,loc.x+4,loc.y+11,loc.x+4,loc.y+13);
    ctx.bezierCurveTo(loc.x+4,loc.y+15,loc.x+5,loc.y+18,loc.x+8,loc.y+18);
    ctx.bezierCurveTo(loc.x+11,loc.y+18,loc.x+12,loc.y+15,loc.x+12,loc.y+13);
    ctx.bezierCurveTo(loc.x+12,loc.y+11,loc.x+11,loc.y+8,loc.x+8,loc.y+8);
    
    ctx.moveTo(loc.x+20,loc.y+8);
    
 ctx.bezierCurveTo(loc.x+17,loc.y+8,loc.x+16,loc.y+11,loc.x+16,loc.y+13);
    ctx.bezierCurveTo(loc.x+16,loc.y+15,loc.x+17,loc.y+18,loc.x+20,loc.y+18);
    ctx.bezierCurveTo(loc.x+23,loc.y+18,loc.x+24,loc.y+15,loc.x+24,loc.y+13);
    ctx.bezierCurveTo(loc.x+24,loc.y+11,loc.x+23,loc.y+8,loc.x+20,loc.y+8);
    ctx.fill();

 ...