var canvas = document.getElementById('c')
var c = canvas.getContext('2d')
// x = 10, y = 20, width = 200, height = 100
c.fillStyle = '#ff0000'
c.strokeStyle = '#ff00ff'
c.lineWidth = 5
c.lineCap = 'round'
c.fillRect(10, 20, 200, 100)
c.stroke()
c.fill()
c.save()
c.restore()
Saves: strokeStyle
fillStyle
globalAlpha
lineWidth
lineCap
lineJoin
miterLimit
shadowOffsetX
shadowOffsetY
shadowBlur
shadowColor
globalCompositeOperation
, Transformations (translate
rotate
scale
transform
setTransform
), Clipping path
c.translate(0, 0)
c.rotate(Math.PI*2/5)
c.scale(1.0, 1.0)
To rotate along origin:
c.translate(ox, oy)
c.rotate(theta)
c.translate(-ox, -oy)
To scale along origin:
c.translate(-ox*x, -oy*y)
c.scale(x, y)
c.translate(ox/x, oy/y)
See MDN: Transformations.
c.drawImage(image, dx, dy, [dw, dh]);
/* `image` can be HTML Image/Canvas/Video */
See MDN: Images.
c.strokeStyle = '#ff00ff';
c.fillStyle = '#ff00ff';
c.shadowOffsetX = 0;
c.shadowOffsetY = 0;
c.shadowOffsetBlur = 3.0;
c.shadowColor = 'rgba(0,0,0,0.2)';
See MDN: Styles
gr = c.createLinearGradient(x0,y0,x1,y1)
gr = c.createRadialGradient(x0,y0,r0,x1,y1,r1)
pat = c.createPattern(image, 'repeat-x')
c.fillStyle = gr