JSFiddle - React, Tailwind, and code Playground

by Artem

HTML

<canvas width="600" height="200"></canvas>

JavaScript

'use strict';
var cx, trapeze, diamond, zigzag, spiral;

cx = document.querySelector("canvas").getContext("2d");

trapeze = function() {
  cx.fillStyle = 'crimson';
  cx.lineWidth = 5;
  cx.beginPath();
  cx.moveTo(50, 10);
  cx.lineTo(20, 100);
  cx.lineTo(130, 100);
  cx.lineTo(100, 10);
  cx.closePath();
  cx.fill();
  cx.stroke();
};

diamond = function() {
  cx.fillStyle = 'crimson';
  cx.lineWidth = 5;

  cx.fillRect(50, 50, 100, 100);
  cx.strokeRect(50, 50, 100, 100);

  cx.translate(100, 100);
  cx.rotate(20 * Math.PI / 180);
  cx.translate(-100, -100);

  cx.fillRect(50, 50, 100, 100);
  cx.strokeRect(50, 50, 100, 100);
};

zigzag = function() {
  let x = true,
    y;
  cx.beginPath();
  cx.moveTo(10, 10);

  for (y = 30; y <= 200; y += 20) {
    if (x) {
      x = !x;
      cx.lineTo(100, y);
      continue;
    }
    cx.lineTo(10, y);
    x = !x;
  }

  cx.stroke();
};

spiral = function() {
  let r, t = true;
  cx.beginPath();
  for (r = 10; r < 300; r += 10) {
    if (t) {
      t = !t;
       cx.arc(200, 100, r, 0, Math.PI);
      continue;
    }
    cx.arc(210, 100, r, Math.PI, Math.PI * 2);
		t = !t;
  }
  //cx.arc(200, 100, 20, 0, Math.PI);
  //cx.arc(210, 100, 30, Math.PI, Math.PI * 2);

  //cx.arc(200, 100, 40, 0, Math.PI);
  //cx.arc(210, 100, 50, Math.PI, Math.PI * 2);

  //cx.arc(200, 100, 60, 0, Math.PI);
  //cx.arc(210, 100, 70, Math.PI, Math.PI * 2);

  cx.stroke();
};

cx.save();
trapeze();
cx.clearRect(0, 0, 600, 200);

diamond();
cx.clearRect(0, 0, 600, 200);

cx.restore();
zigzag();
cx.clearRect(0, 0, 600, 200);

spiral();