f8d0aa06c0
The current code was going into an infinite loop It's also setting `patternUnits` to `userSpaceOnUse` in order to get the same behaviour as canvas patterns
29 lines
855 B
JavaScript
29 lines
855 B
JavaScript
export default function pattern(ctx) {
|
|
// Create a pattern
|
|
const patternCanvas = document.createElement('canvas');
|
|
const patternContext = patternCanvas.getContext('2d');
|
|
|
|
// Give the pattern a width and height of 50
|
|
patternCanvas.width = 50;
|
|
patternCanvas.height = 50;
|
|
|
|
// Give the pattern a background color and draw an arc
|
|
patternContext.fillStyle = '#fec';
|
|
patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
|
|
patternContext.arc(0, 0, 50, 0, .5 * Math.PI);
|
|
patternContext.stroke();
|
|
|
|
const pattern = ctx.createPattern(patternCanvas, 'repeat');
|
|
ctx.fillStyle = pattern;
|
|
ctx.fillRect(0, 0, 50, 50);
|
|
|
|
var img = new Image();
|
|
img.src = 'pattern.png';
|
|
img.onload = function() {
|
|
var pattern = ctx.createPattern(img, 'repeat');
|
|
ctx.fillStyle = pattern;
|
|
ctx.fillRect(50, 50, 300, 300);
|
|
};
|
|
|
|
};
|