JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<h3>
Render path on Canvas
</h3>
<canvas id='canvas' height='1080px' width='1920px'></canvas>
<p>
  Canvas is scaled down by half but not responsive.
</p>

CSS

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  padding: 2rem;
}

#canvas {
  background: #16a085;
  height: 540px;
  width: 960px;
  background: url('http://i.imgur.com/dvOQ6kp.jpg') no-repeat;
  background-size: cover;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#1abc9c';
ctx.lineWidth = 1;
ctx.fillStyle = '#1abc9c';

var p = new Path2D("M1502,289h-3l-3-12l-263-2l-1.4-3.6L1257,444v450.2l20,0.8l269,12.3V462C1546,462,1518.5,352.1,1502,289z");
ctx.stroke(p);
ctx.fill(p);