JSFiddle - React, Tailwind, and code Playground

by Milan Gladiš

HTML

<canvas id="canvas"></canvas>

CSS

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
}

#canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  background-color: #ccc;
}

JavaScript

/* var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 6;
ctx.strokeStyle = "#333";


ctx.beginPath();
ctx.moveTo(100, 250);


ctx.quadraticCurveTo(250, 100, 400, 250);
ctx.stroke();
*/

function enhanceContext(canvas, context) {
    var ratio = window.devicePixelRatio || 1,
        width = canvas.width,
        height = canvas.height;
		
    if (ratio > 1) {
        canvas.width = width * ratio;
        canvas.height = height * ratio;
        canvas.style.width = width + "px";
        canvas.style.height = height + "px";
        context.scale(ratio, ratio);
    }
}

var canvas = document.getElementById('canvas');
var body = document.getElementsByTagName('body');

var context = canvas.getContext('2d');
enhanceContext(canvas, context);

context.beginPath();
context.moveTo(188, 130);
context.bezierCurveTo(140, 10, 388, 10, 388, 170);
context.lineWidth = 1;

// line color
context.strokeStyle = '#888';
context.stroke();