Skip to content

Instantly share code, notes, and snippets.

@Francescu

Francescu/gist:5003a61570cd9d2f5cc7

Created March 15, 2015 15:36
Show Gist options
  • Save Francescu/5003a61570cd9d2f5cc7 to your computer and use it in GitHub Desktop.
Save Francescu/5003a61570cd9d2f5cc7 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Circle Mask over Image in Canvas
Raw
gistfile1.coffee
scratchCanvas = document.createElement('canvas')
scratchCanvas.width = size
scratchCanvas.height = size
scratchCtx = scratchCanvas.getContext('2d')
scratchCtx.clearRect(0, 0, scratchCanvas.width, scratchCanvas.height)
scratchCtx.globalCompositeOperation = 'source-over'
scratchCtx.drawImage(image, 0, 0, size, size)
scratchCtx.fillStyle = '#fff' #whatever
scratchCtx.globalCompositeOperation = 'destination-in'
scratchCtx.beginPath()
scratchCtx.arc(size / 2, size / 2, size/2, 0, 2 * Math.PI, true)
scratchCtx.closePath()
scratchCtx.fill()
ctx.drawImage scratchCanvas, 0, 0, size, size
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment