Canvas rounded rect

by mvasilkov

HTML

<canvas width=500 height=500 id=c>

CSS

canvas {
    background: #101010;
}

JavaScript

var c = document.getElementById('c')
var canvas = c.getContext('2d')

canvas.beginPath()
roundedRect(50, 50, 100, 20)

canvas.fillStyle = '#fff'
canvas.fill()

canvas.strokeStyle = '#ff0080'
canvas.stroke()


function roundedRect(x, y, width, height) {
    canvas.moveTo(x, y + height)
    canvas.quadraticCurveTo(x, y, x + width, y)
    canvas.quadraticCurveTo(x + width, y + height, x, y + height)
}