if (typeof registerPaint !== 'undefined') { class ScallopedBorder { static get inputProperties() { return ['--extra-scallopRadius', '--extra-scallopWeight', '--extra-scallopColor'] } paint(ctx, size, properties) { const radius = parseInt(properties.get('--extra-scallopRadius')) || 10 const scallopWeight = parseInt(properties.get('--extra-scallopWeight')) || 2 const color = String(properties.get('--extra-scallopColor')) || 'black' const height = size.height const width = size.width ctx.lineWidth = scallopWeight ctx.strokeStyle = color const getSteps = (sizeVal) => { return Math.floor(sizeVal / (radius * 2) - 2) } const getOwnRadius = (sizeVal, otherRad) => { const steps = getSteps(sizeVal) + 1 const totalSpace = sizeVal - (radius * 2) const spaceTaken = steps * (radius * 2) let pixelsRemaining = totalSpace - spaceTaken if (otherRad) { const radDif = otherRad - radius pixelsRemaining = totalSpace - spaceTaken - radDif } const newRadius = radius + ((pixelsRemaining / 2) / (steps + 1)) return (newRadius) } const horizRadius = getOwnRadius(width, getOwnRadius(height)) const vertRadius = getOwnRadius(height, getOwnRadius(width)) // top for (let i = 0; i <= getSteps(width); i++) { ctx.beginPath() ctx.arc(horizRadius + horizRadius + (horizRadius * i * 2), horizRadius + (scallopWeight * 1) , horizRadius, 0, Math.PI, true) ctx.stroke() } // bottom for (let i = 0; i <= getSteps(width); i++) { ctx.beginPath() ctx.arc(horizRadius + horizRadius + (horizRadius * i * 2), height - horizRadius - (scallopWeight * 1), horizRadius, 0, Math.PI, false) ctx.stroke() } // left for (let i = 0; i <= getSteps(height); i++) { ctx.beginPath() ctx.arc(vertRadius + (scallopWeight * 1), vertRadius + vertRadius + (vertRadius * i * 2), vertRadius, Math.PI * 0.5, Math.PI * 1.5, false); ctx.stroke() } // right for (let i = 0; i <= getSteps(height); i++) { ctx.beginPath() ctx.arc(width - vertRadius - (scallopWeight * 1), vertRadius + vertRadius + (vertRadius * i * 2), vertRadius, Math.PI * 0.5, Math.PI * 1.5, true); ctx.stroke() } } } registerPaint('extra-scallopedBorder', ScallopedBorder) }