Firefox less than 128px canvas

README.md

Firefox less than 128px canvas

view on jsgist

index.css

/*bug-in-github-api-content-can-not-be-empty*/

index.html

<p>Using CSS to blow up a 21 by 11 pixel canvas to visible size, while keeping the individual pixels visible:</p>
<canvas width=21 height=11 style="image-rendering:pixelated;width:840;height:440px"></canvas>

index.js

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

ctx.fillStyle = "black";
ctx.fillRect(0, 0, 21, 11);
ctx.fillStyle = "white";
ctx.fillRect(1, 1, 9, 9);
ctx.fillRect(11, 1, 9, 9);
ctx.strokeStyle = ctx.fillStyle = "black";
ctx.lineWidth = 1;

ctx.beginPath();
ctx.arc(5.5, 5.5, 2.5, 0, Math.PI * 2);
ctx.fill();

ctx.beginPath();
ctx.arc(5.5, 5.5, 3.5, 0, Math.PI * 2);
ctx.stroke();

ctx.beginPath();
ctx.arc(15.5, 5.5, 2.5, 0, Math.PI * 2);
ctx.fill();

ctx.beginPath();
ctx.arc(16, 6, 3.5, 0, Math.PI * 2);
ctx.stroke();

jsGist.json

{"name":"Firefox less than 128px canvas","settings":{},"filenames":["index.html","index.css","index.js"]}