JSFiddle - React, Tailwind, and code Playground

by aaccioly

HTML

<canvas width="400" height="160"></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:200px;
    height:80px
}

JavaScript

var c = document.getElementsByTagName('canvas')[0];
var ctx = c.getContext('2d');
ctx.lineWidth = 1;
ctx.strokeStyle = '#f00';
ctx.fillStyle = '#eff';

ctx.fillRect(42, 42, 80, 80);
ctx.strokeRect(42, 42, 80, 80);
ctx.fillRect(160, 42, 80, 80);
ctx.strokeRect(160, 42, 80, 80);
ctx.fillRect(280, 40, 80, 80);
ctx.strokeRect(280, 40, 80, 80);

ctx.strokeStyle = '#fff';
ctx.strokeRect(42, 42, 80, 80);
ctx.strokeRect(80, 42, 80, 80);
ctx.strokeRect(280, 40, 80, 80);

var imageObj = new Image();

imageObj.onload = function () {
    ctx.drawImage(imageObj, 160, 42, 80, 80);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';