Canvas 2D: Test stroke with color vs stroke with pattern

README.md

Canvas 2D: Test stroke with color vs stroke with pattern

view on jsgist

index.css

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

index.html

<canvas width="64" height="64" style="
  width: 512px;
  height: 512px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
"></canvas>

index.js

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

const patternCanvas = document.createElement('canvas');
patternCanvas.width = 1;
patternCanvas.height = 1;
const pCtx = patternCanvas.getContext('2d');
pCtx.fillStyle = '#00F';
pCtx.fillRect(0, 0, 1, 1);

const pattern = ctx.createPattern(patternCanvas, 'repeat');

ctx.beginPath();
ctx.arc(16, 16, 12, 0, Math.PI * 2);
ctx.strokeStyle = '#F00';
ctx.stroke();

ctx.beginPath();
ctx.arc(48, 48, 12, 0, Math.PI * 2);
ctx.strokeStyle = pattern;
ctx.stroke();

jsGist.json

{"name":"Canvas 2D: Test stroke with color vs stroke with pattern","settings":{},"filenames":["index.html","index.css","index.js"]}