JSFiddle - React, Tailwind, and code Playground

by Tyler Hogsett

HTML

<h1>Maverick Canvas Painting</h1>
<canvas id="canvas" width="400" height="400"></canvas>
<image id="maverickLogo" src="https://www.raceit.com/Templates/UI/Image.ashx?img=%2Fimages%2Fevent_logos%2F024%2F892%2Fmedium.jpg&w=200"></image>

CSS

body {
    background-color: black;
}
h1 {
    color: white;
    font-family: Helvetica;
}
#canvas {
    background-color: white;
}
#maverickLogo {
    display: none;
}

JavaScript

// define global color constants
var COLORS = {
    BLUE: '#022961',
    GRAY: '#BBBBBB'
};

// get the canvas element by its id
var canvas = document.getElementById('canvas');
// get a "context" from the canvas
var context = canvas.getContext('2d');

// set the fill color to blue
context.fillStyle = COLORS.BLUE;
// draw a rectangle on the canvas
context.fillRect(100, 100, 50, 50); // (x, y, width, height)

// get the image element by its id
var logo = document.getElementById('maverickLogo');
// draw the image on the canvas
context.drawImage(logo, 200, 200); // (image, x, y)

// draw a nifty 3d-looking graph on the screen
for (var i = 0; i < 10; i++) {
    // "reset" the current path
    context.beginPath();
    // set the stroke color
    if (i % 2 == 0) { // if i is even
        // set the stroke color to blue
        context.strokeStyle = COLORS.BLUE;
    } else { // otherwise (i is odd)
        // set the stroke color to gray
        context.strokeStyle = COLORS.GRAY;
    }
    // draw the bottom-left portion of the graph
    context.moveTo(0, i * 40);
    context.lineTo((i + 1) * 40, 400);
    // draw the top-right portion of the graph
    context.moveTo(i * 40, 0);
    context.lineTo(400, (i + 1) * 40);
    // render the lines to the canvas
    context.stroke();
}