JSFiddle - React, Tailwind, and code Playground

by Pasky Org

HTML

<canvas width="100" height="40"></canvas>
<p>Showing that re-drawing the same antialiased lines does not obliterate old antialiased lines.</p>

CSS

body { background:#eee; margin:2em; text-align:center }
canvas { background:#fff; border:1px solid #ccc; width:400px; height:160px }

JavaScript

var c = document.getElementsByTagName('canvas')[0];
var ctx = c.getContext('2d');
ctx.lineWidth   = 40;
ctx.strokeStyle = '#ff0';
ctx.fillStyle   = '#0ff';

ctx.fillRect(  10.5, 10.5, 20, 20 );
ctx.strokeRect( 10.5, 10.5, 20, 20 );
ctx.fillRect(   40, 10.5, 20, 20 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.fillRect(   70, 10, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );

ctx.strokeStyle = '#0ff';
ctx.strokeRect( 10.5, 10.5, 20, 200 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );