Skip to content

Instantly share code, notes, and snippets.

@felipap
Created October 4, 2013 11:34
Show Gist options
  • Save felipap/6824593 to your computer and use it in GitHub Desktop.
Save felipap/6824593 to your computer and use it in GitHub Desktop.
A set of functions for basic canvas 2d functionality. I find it easier to manipulate objects abstractly like this, even when using a dedicated render() method for each of them.
painter =
applyCanvasOptions : (context, options) ->
if options.fill is true
context.fillStyle = options.color or 'black'
else
context.strokeStyle = options.color or 'blue'
context.lineWidth = options.width or 1
###### Canvas manipulation functions
drawCircle : (context, position, radius=2, options={}) ->
this.applyCanvasOptions(context, options)
context.beginPath()
context.arc(position.x, position.y, radius, 0, 2*Math.PI, true)
if options.fill
context.fill()
else context.stroke()
drawLine : (context, p1, p2, options={}) ->
this.applyCanvasOptions(context, options)
context.beginPath()
context.moveTo(p1.x, p1.y)
context.lineTo(p2.x, p2.y)
context.stroke()
drawTriangle : (context, p1, p2, p3, options={}) ->
this.applyCanvasOptions(context, options)
context.beginPath()
context.moveTo(p1.x, p1.y)
context.lineTo(p2.x, p2.y)
context.lineTo(p3.x, p3.y)
context.closePath()
context.stroke()
drawCenteredPolygon : (context, center, points, angle=0, options={}) ->
this.applyCanvasOptions(context, options)
context.save()
context.translate(center.x, center.y)
context.rotate(angle)
context.beginPath()
context.moveTo(points[0].x, points[0].y)
for point in points[1..]
context.lineTo(point.x,point.y)
context.closePath()
if options.fill
context.fill()
else context.stroke()
context.restore()
# Draws a polygon.
# Won't take angle arg, because it is necessary to have the rotation center.
# For that, use drawCenteredPolygo
drawPolygon : (context, points, options={}) ->
this.applyCanvasOptions(context, options)
context.beginPath()
context.moveTo(points[0].x, points[0].y)
for point in points[1..]
context.lineTo(point.x,point.y)
context.lineTo(points[0].x, points[0].y)
context.closePath()
if options.fill
context.fill()
else context.stroke
# Fills a rectangle between two points.
drawRectangle : (context, p1, p2, angle=0, options={}) ->
this.applyCanvasOptions(context, options)
context.beginPath()
if angle isnt 0
context.save()
context.translate((p1.x+p2.x)/2, (p1.y+p2.y)/2) # Translate center of canvas to center of figure.
context.rotate(angle)
context.rect(p1.x, p1.y, p2.x-p1.x, p2.y-p1.y)
context.restore()
else
context.rect(p1.x, p1.y, p2.x-p1.x, p2.y-p1.y)
if options.fill
context.fill()
else context.stroke()
# Draws a rectangle using the center and size (x:width,y:height) as paramenters.
drawSizedRect : (context, point, size, angle=0, options={}) ->
this.applyCanvasOptions(context, options)
context.beginPath()
if angle
context.save()
context.translate(point.x, point.y) # Translate center of canvas to center of figure.
context.rotate(angle)
context.rect(-size.x/2, -size.y/2, size.x, size.y)
context.restore()
else
context.rect(point.x-size.x/2, point.y-size.y/2, size.x, size.y)
if options.fill
context.fill()
else context.stroke()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment